Html播放m3u8视频

一，首先现在hls.js

hls.js

二，html代码

<video id="video" webkit-playsinline playsinline x5-playsinline controls
      width="100%" height="100%"
      poster="/statics/video/poster.png">
                    您的浏览器不支持视频播放
</video>
<script src="/statics/js/hls.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const video = document.getElementById('video');

        // 视频源地址
        const videoSrc = "/statics/video/jzauntexam.m3u8";

        // 初始化 HLS 播放器
        function initHls() {
            if (Hls.isSupported()) {
                const hls = new Hls({
                    enableWorker: true,
                    lowLatencyMode: true,
                    backBufferLength: 90
                });

                hls.loadSource(videoSrc);
                hls.attachMedia(video);

                hls.on(Hls.Events.MANIFEST_PARSED, function(event, data) {
                    console.log('HLS manifest parsed', data);

                    // 尝试自动播放
                    //attemptPlay();
                });

                hls.on(Hls.Events.MEDIA_ATTACHED, function() {
                    console.log('HLS media attached');
                });

                hls.on(Hls.Events.ERROR, function(event, data) {
                    console.error('HLS error:', data);
                    handleError(data);
                });

                hls.on(Hls.Events.MEDIA_ATTACHING, function() {
                    console.log('HLS media attaching');
                });
            }
            // Safari 浏览器原生支持 HLS
            else if (video.canPlayType('application/vnd.apple.mpegurl')) {
                video.src = videoSrc;
                video.addEventListener('loadedmetadata', function() {
                    console.log('Safari HLS loaded');

                    // 尝试自动播放
                    //attemptPlay();
                });
                video.addEventListener('error', function(e) {
                    console.error('Safari HLS error:', e);
                });
            }
            // 不支持 HLS 的情况
            else {
                console.error('HLS is not supported in this browser');
                alert('您的浏览器不支持播放该视频格式');
            }
        }

        // 尝试自动播放
        function attemptPlay() {
            const playPromise = video.play();
            if (playPromise !== undefined) {
                playPromise
                    .then(() => {
                        console.log('自动播放成功');
                    })
                    .catch(error => {
                        console.log('自动播放被阻止:', error);
                    });
            }
        }

        // 错误处理
        function handleError(error) {
            if (error.type === Hls.ErrorTypes.MEDIA_ERROR) {
                console.warn('media error encountered, try to recover');
            }
            if (error.fatal) {
                switch(error.type) {
                    case Hls.ErrorTypes.NETWORK_ERROR:
                        console.log('network error');
                        break;
                    case Hls.ErrorTypes.MEDIA_ERROR:
                        console.log('media error');
                        break;
                    default:
                        console.log('other error');
                }
            }
        }

        // 初始化 HLS
        initHls();

        // 事件监听
        video.addEventListener('waiting', () => {
        });
        video.addEventListener('playing', () => {
        });
        video.addEventListener('timeupdate', ()=>{
            //监听播放进度
            if (video.currentTime > 0 && video.currentTime >= video.duration){
                app.ksbtndisable = false;
            }
        });
    });
</script>