功能描述： 在移动端浏览器上，收看直播的视频流。并做下载应用的引导。
直播协议，常用的有以下几种：
- RTMP： Adobe的专利协议，在客户端借助FlashPlayer就可以播放。底层协议是TCP。RTMP的实时性比较好，但由于需要安装flash插件才可以播放，在移动端的支持性比较差。
- HTTP-FLV :和RTMP区别不大，没有Adobe的专利限制。
- HLS: Http Live Streaming,基于Http。HLS可以在HTML5中直接打开播放，所以在移动web端支持比较好。但hls播放延时比较大，实际测试，播放时延经过腾讯云后有1分钟以上。。。
HLS的播放原理如下：
要播放的视频被分片，分片的视频格式为 .ts 。
在video的src中引入 xxx.m3u8格式的文件。m3u8格式的文件内容包含了要播放的视频的相关信息，浏览器根据这些信息来播放。m3u8文件的内容是动态更新的。
腾讯云提供了RTMP/FLV和HLS的，也就是以上三种，wap端使用的是HLS，腾讯云直接给出m3u8文件
在选定方案上，由于最初对直播没有了解（主要是不了解手机浏览器对视频格式的支持），在FLV上花了很大力气，耽误了比较久的时间。其实磨刀不误砍柴工，做项目时，如果涉及到了之前没有用过的技术，前期花时间去研究它的原理还是很有必要的。这样在后面正式开发的时候，能够节省更多的时间。
选定使用hls格式的视频以后，播放方案有CKplayer和基于videojs的FZ-live。一开始因为Ckplayer自身集成插件比较多选择了它，但是在pc上测试后发现有跨域问题，可能是视频源方对UA进行了检测并做了限制。因此改用了Videojs。
因为手机端 android3.0和ios3.0以上就原生支持HLS的播放了（以上数据源于http://imweb.io/topic/553ca3721dd5dfb9263060ce），所以最后方案是 ：pc使用videojs播放， 手机端不做任何处理，直接使用<video>播放
记录
- 部分国产浏览器中，video元素的z-index是默认为max值的，也就是说，video永远都在视窗的最高一层。测试了UC、QQ、百度、360、傲游、搜狗，其中UC，QQ，搜狗有这个现象。设计稿中直播信息的部分是在视频内容区域里的，和设计沟通后，有这种现象的浏览器，直播信息放在视频的上方。
- 包含有img或者video的元素在手机chrome中点击时，会覆盖一层蓝色遮罩，解决方法：-webkit-tap-highlight-color: transparent，该css的作用是将点击高亮的颜色设为透明。
播放多个视频，进度条切换逻辑
- 拿到视频个数，fragNum；
- 根据播放时间更改进度条长度；
- 根据进度条判断播放到第几个视频，如果是最后一个，播放完就停止，将播放按钮更换为停止状态；
- 获得总时长，根据总时长计算1px对应的时间 duration、unitT；
- 获得视频段数，并根据视频时长算出对应width， w1，w2,...,wn；
- 获得点击前和点击后位置的长度，计算是否切换了视频，以及落在哪个视频的区间内；
- 如果是当前视频就更改播放时间， 如果在别的视频就更换src并播放，并更改播放时间；
- 加载视频或者更改播放时间时加载loading动画改进体验
- 视频序号变化条件：拖动进度条切换
- 自然播放结束切换：检测innerBar的长度 x；
- 根据x判断当前播放视频的序号 vd_i。vd_i 等于最大视频序列号，结束播放， vd_i小于最大视频序列号，切换下一个；
- 不处理currentTime，将时间封装起来，根据当前播放视频序号来给出时间。
网友评论