播放m3u8视频页面代码简单demo

播放页面html页面代码

<script src="//cdn.jsdelivr.net/npm/hls.js@latest"></script>
                        <div id="player-container">
                            <div id="player"></div>
                            <div id="player-tip"></div>
                        </div>

css

 #player-container {
            position: relative;
            width: 100%;
            max-width: 752px;
            height: 423px;
            margin: 30px auto;
            background: black;
        }

        @media ( max-width : 767px) {
            #player-container {
                height: 300px;
            }
        }



       #player {
            width: 100%;
            height: 100%;
        }

         #player-tip {
            position: absolute;
            width: 100%;
            top: 50%;
            margin-top: -20px;
            text-align: center;
            color: #ccc;
            visibility: hidden;
        }

js

<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    function isMobile() {
        return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent));
    }

    function playM3U8(src) {
        window.location.hash = 'type=m3u8&src=' + encodeURIComponent(src);
        $('#player-tip').hide();

        if (isMobile()) {
            playM3U8byNative(src);
        } else {
            playM3U8byHlsJS(src);
        }
    }

    function playM3U8byNative(src) {
        var html = '<video id="player" controls autoplay>';
        html += '<source src="' + src + '" type="application/x-mpegurl">'
        html += '<source src="' + src + '" type="video/mp4">'
        html += '</video>';
        $('#player').replaceWith(html);
        return;
    }

    function playM3U8byHlsJS(src) {
        $('#player').replaceWith('<video id="player" controls></video>');
        var video = document.getElementById('player');
        var hls = new Hls();
        hls.attachMedia(video);
        hls.on(Hls.Events.MEDIA_ATTACHED, function () {
            console.log("video and hls.js are now bound together !");
            hls.loadSource(src);
            hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
                console.log("manifest loaded, found " + data.levels.length + " quality level");
                video.play();
            });
        });
    }

使用 在js里调用

playM3U8("m3u8格式的播放地址");