视频直播技术之HLS 如何播放m3u8格式

最新推荐文章于 2024-06-19 13:42:37 发布

原创最新推荐文章于 2024-06-19 13:42:37 发布 · 2.3w 阅读

16 ·

CC 4.0 BY-SA版权

js插件专栏收录该内容

81 篇文章

订阅专栏

本文介绍了HLS直播技术的工作原理，包括视频流的分段、HTTP点播、多码率切换和播放列表文件m3u8的作用。重点讨论了在PC端和移动端如何实现m3u8格式直播视频的播放，提供了相关代码示例和参考资料链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引言
在H5新标签video诞生之前，基本上所有直播都是用flash实现的。常用的流媒体协议主要有 HTTP 渐进下载和基于 RTSP/RTP 的实时流媒体协议，这两种协议是完全不同的实现方式。主要区别如下：
1. 一种是分段渐近下载，一种是基于实时流来实现播放
2.协议不同，HTTP 协议的渐近下载意味着你可以在一台普通的 HTTP 的应用服务器上就可以直接提供点播和直播服务
3.延迟有差异，HTTP 渐近下载的方式的延迟理论上会略高于实时流媒体协议的播放
4.渐近下载会生成索引文件，所以需要考虑存储，对 I/O 要求较高

实现原理
HLS 点播是常见的分段 HTTP 点播，就是将视频流分成不同的片段，客户端不断的去下载该片段，由于片段之间的分段间隔时间非常短，所以看起来是一条完整的播放流，实现的重点是对于媒体文件的分割。同时，HLS 还支持多码率的切换，客户端可以选择从许多不同的备用源中以不同的速率下载同样的资源，允许流媒体会话适应不同的数据速率。多清晰度就是这样实现的。
为了播放媒体流，客户端首先需要获得播放列表文件，也就是根据 HLS 生成的片段列表，该列表中包含每个流媒体的文件，客户端以类似轮询的方式不断重复加载播放列表文件并将片段追加实现流媒体的播放。
播放列表文件就是通常我们所说的 m3u8 文件，是以后缀 .m3u8 Content-Type是”application/vnd.apple.mpegurl” 的文件。

本文主要目的在于告诉读者如何在pc端和移动端播放m3u8格式直播视频。

pc端代码

<div id="playercontainer"></div>
<script type="text/javascript" src="http://resource.bcevod.com/player/cyberplayer.js"></script>
<script type="text/javascript">
    var player = cyberplayer("playercontainer").setup({
        width: 640,
        height: 480,
        file: "http://_LC_XY0_non_11009625215214236861672914_OX/index.m3u8",
        image: "",
        autostart: false,
        stretching: "uniform",
        repeat: false,
        volume: 100,
        controls: true,
        ak: 'cc94de6803904f2ca7159eedeaced55d'
    });
</script>

移动端代码

<video class="vjs-tech" width="100%" height="100%"  
    controls="controls" autoplay="autoplay"  
    x-webkit-airplay="true" x5-video-player-fullscreen="true"  
    preload="auto" playsinline="true" webkit-playsinline  
    x5-video-player-typ="h5">  
    <source type="application/x-mpegURL" src="http://dlhls.cdn.zhanqi.tv/zqlive/22578_yKdJM.m3u8">  
</video>

pc端代码

<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
<video id="video"></video>
<script>
  if(Hls.isSupported()) {
    var video = document.getElementById('video');
    var hls = new Hls();
    hls.loadSource('http://www.streambox.fr/playlists/test_001/stream.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play();
  });
 }
</script>

pc端代码2

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
<video id="video"></video>
<script>
    if(Hls.isSupported()) {
        var video = document.getElementById('video');
        var hls = new Hls();
        hls.loadSource('http://_LC_XY0_non_11009625215214236861672914_OX/index.m3u8');
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED,function() {
            video.play();
        });
    }
</script>
</body>
</html>