浏览器播放hls视频流的解决方案

2016/06/24技术

HLS (HTTP Live Streaming)，Apple的动态码率自适应技术。主要用于PC和Apple终端的音视频服务。包括一个m3u(8)的索引文件，TS媒体分片文件和key加密串文件。

hls流在非苹果的PC机上只有微软的Edge支持，但三大移动平台上的支持都非常不错，因此在chrome等众多PC浏览器上需要使用flash进行编码后再播放给用户。在nplive中选用了强大的jwplayer（从iptv找到了破解版，再次感谢网络中心），通过js调用。

这里由于flash有着对访问对象的跨域限制，如果访问目标根目录的crossdomain.xml没有允许该访问来源或不存在crossdomain.xml，flash将不能访问目标资源，因此需要在每台推流服务器根目录部署crossdomain.xml，并允许*.bitnp.net的访问来源。

1
2
3

<cross-domain-policy>
<allow-access-from domain="*.bitnp.net"/>
</cross-domain-policy>

flash在移动设备上的支持不好，所以这里有必要对访问者的设备类型作一个判断。首先想到的就是通过User-Agent来进行判断。但由于浏览器和设备标识过于繁多且很可能在判断时出现疏漏，nplive采用了较为成熟的轻量级的Mobile-Detect（https://github.com/serbanghita/Mobile-Detect）和一个简单的index.php文件对访问者进行了判断，Mobile-Detect有着比较全面和准确的UA识别功能。

区分出来的移动端用户将被跳转到移动版的页面，视频播放是以video.js和html5中的video标签实现的，目前大多数浏览器都支持video标签，同时移动设备能够支持hls视频流，这样就解决了hls的全平台播放问题。