v

<video id="videoPlayer" controls style="width: 100%; max-width: 800px; height: auto;"></video>

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

<script>
    // 3. 你的 M3U8 链接
    const videoSrc = 'https://hansn-govi.mushroomtrack.com/hls/qqQjGEimonnLKPhKEK4CHA/1751537275/19000/19367/19367.m3u8'; // 替换为你的完整 M3U8 链接

    // 4. 获取视频播放器元素
    const video = document.getElementById('videoPlayer');

    // 5. 检查浏览器是否支持 Hls.js
    if (Hls.isSupported()) {
        const hls = new Hls();
        // 将 M3U8 链接加载到 Hls.js
        hls.loadSource(videoSrc);
        // 将 Hls.js 绑定到原生 video 元素
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED, function() {
            video.play(); // M3U8 解析完成后自动播放
        });
        hls.on(Hls.Events.ERROR, function (event, data) {
            console.error('Hls.js error:', event, data);
            // 可以在这里处理错误，例如显示错误消息给用户
        });
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        // 对于原生支持 HLS 的浏览器 (如 Safari)，直接设置 src
        video.src = videoSrc;
        video.addEventListener('loadedmetadata', function() {
            video.play();
        });
    } else {
        // 如果浏览器不支持 HLS
        console.error('浏览器不支持 HLS 播放。请尝试更新浏览器或使用其他浏览器。');
        // 可以在这里显示一个提示信息给用户
        alert('您的浏览器不支持此视频播放，请尝试使用 Chrome, Firefox 或 Edge。');
    }
</script>