【学习笔记】HLS技术简介&实现网页播放m3u8直播源

90 阅读 0 评论 60 点赞

我是靠谱客的博主任性裙子，最近开发中收集的这篇文章主要介绍【学习笔记】HLS技术简介&实现网页播放m3u8直播源，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

转载于:https://my.oschina.net/u/3943244/blog/3073890