html5播放m3u8视频，web端看直播

最新推荐文章于 2025-08-03 10:20:56 发布

转载最新推荐文章于 2025-08-03 10:20:56 发布 · 2.8w 阅读

文章标签：

#运维

本文介绍了一个基于HTML5的HLS直播播放器实现方案，使用video.js作为基础播放器，并通过JavaScript动态设置直播源，使得播放器能够灵活地加载不同的直播流。需要注意的是，该播放器必须通过服务器部署才能正常工作。

https://github.com/jiqing9006/hLive

<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8 />
    <title>fz-live</title>
    <link href="./css/video.css" rel="stylesheet">
    <script src="./js/video.js"></script>
    <script src="./js/videojs-live.js"></script>
</head>

<body>
    <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="1000" height="500" data-setup='{}'>
        <source src="./src/z.m3u8" type="application/x-mpegURL">
    </video>
    <script>
        var liveUrl  =  'http://pili-live-hls.qiniu.yunlutong.com/yunlutong/598daedea95be73db168e955.m3u8';
        var player = videojs('my_video_1');

        player.ready(function() {
            this.src({
                src: liveUrl,
                type: 'application/x-mpegURL',
            });
        });

    </script>
</body>

</html>

注意的地方，必须是通过服务器访问，才有效。
直接右击打开，看不到效果。

可以更改地址，很灵活，很方便。

关注博主即可阅读全文