H5页面直播hls视频

#PC、手机web页面直播hls视频

概述
一转眼就到了11月，很多工作中遇到的坑都在一一解决，仔细想了想值得分享的应该是web页面直播hls格式的视频了，当时我们的项目是需要在手机嵌入的页面来播放摄像头的视频，视频格式是hls直播流，HTML5的video标签并不能直接播放hls直播流，需要借助插件来实现。
关于插件的话网上也搜了一大堆用来测试，发现免费还好用的应该算是video.js了，video.js也是专门针对hls直播流做了一个依赖video.js的插件videojs-contrib-hls.js。前端页面同时引入这两个js插件就可以播放hls直播流。
###注意
当然播放也是有需要注意的地方：

后端传过来的播放文件地址是以 *.m3u8为后缀，关于hls转换m3u8这里就不介绍了，因为我只是做前端的，对这个不了解
前端进行hls直播需要启动server才可以，不然直接播放会报错，我用的是eclipse
hls直播有延迟，我们的是大约15秒，然后每次地址可以播放30s，我就用定时器调用接口来实现不间断直播
代码块
好了，废话不多说，直接上例子，例子也是video.js官网的：

链接
gitgub地址：
video-hls

也有在线测试的地址：
http://jsbin.com/meqeqipaye/edit?html,output

video.js里有很多格式的视频播放解决方案，需要的可以看一下：
https://github.com/videojs翻博客看到boonya写的一个视频直播项目流程比较详细，推荐下（2017-11-22更新）：
http://blog.csdn.net/boonya/article/details/52210576