HLS (HTTP Live Streaming)是Apple公司研发的流媒体传输技术,包括一个m3u8的索引文件、多个ts分片文件和key加密串文件。这项技术主要应用于点播和直播领域。

详细简介可参考:百度百科-HLS

之前在做电视直播网站的时候,涉及到了这项技术,特此记录以下关键的代码:

在线或本地播放m3u8文件,比较稳定的方法是使用github上的开源库:Video.js

该库封装了很多操作,直接使用即可,无需我们手动去解析m3u8获取ts分片文件,很方便,感谢作者。

示例代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>videojs-contrib-hls embed</title>

  <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
  <script src="https://unpkg.com/video.js/dist/video.js"></script>
  <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>

</head>
<body>
  <h1>Video.js Example Embed</h1>

  <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268"
  data-setup='{}'>
    <source src="http://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8" type="application/x-mpegURL">
  </video>

  <script>
  </script>

</body>
</html>

其中,source可以有多个。

在线引入的js文件有时访问速度会很慢,建议下载到本地再引入。

07-14 12:59