bill
/
4pc


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
							<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>M3U8 视频播放示例</title>
    <link href="https://vjs.zencdn.net/7.20.3/video-js.css" rel="stylesheet" />
    <script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>
</head>

<body>
    <h1>M3U8 视频播放示例</h1>
    <div>
        <video id="hlsVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"
            width="100%" height="100%">
            <source id="source" src="/gear1/prog_index.m3u8" type="application/x-mpegURL" />
        </video>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            var videoElement = document.getElementById('hlsVideo');
            var player = videojs(videoElement, {
                bigPlayButton: true,
                textTrackDisplay: false,
                posterImage: false,
                errorDisplay: false,
                autoplay: true
            });

            player.src({
                src: videoElement.querySelector('#source').getAttribute('src'),
                type: 'application/x-mpegURL'
            });

            // 将播放器实例存储在全局变量中以便将来可以访问它
            window.hlsPlayer = player;
        });

        // 清理工作，例如卸载播放器
        window.onunload = function () {
            if (window.hlsPlayer) {
                window.hlsPlayer.dispose();
            }
        };
    </script>
</body>

</html>