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文件有时访问速度会很慢,建议下载到本地再引入。