前端对于直播的一些理解

1、对于以前的pc直播而言，直播流分为两种（falsh播放和h5播放，falsh播放通常使用videojs框架，而h5直播使用的是b站的flv框架）

2、而对于现在移动端来说就只有h5播放（而h5播放需要注意兼容性的问题）

而兼容性问题又分好几类

（1）根据浏览器

<video
    playsInline="true"　　/* ios小窗口播放 */
    webkit-playsinline="true"
    x5-playsinline="true"
    x5-video-player-type="h5"　　/* 启动h5播放器 */
    x5-video-player-fullscreen="true"　　/* 全屏 */
    x5-video-orientation="portraint"　　/* 横屏竖屏，landscape横屏，默认竖屏portraint */
>

</video>

（2）根据设备（ios，android），设备问题后面讲。

3、其次要分清自己的直播流是什么样的直播流。大体上也就分两种类型（HLS和RTMP），而这又分为好几种大体看后缀（***.m3u8，***.flv，***，***.ts）

4、因为直播流和设备还是有一定关系的所以现在才说，而ios是不能使用HLS播放的只能使用RTMP，而android都可以，但是低端机型有一些效果很差。

5、但是android本身的问题也很大，就是会在浏览器中自动打开一个播放器，而这个播放器层级一定是最高的，就是你怎么设置zIndex都没有用，这样的话你直播的其他元素就有影响。根据这一点解决方案就缩小了范围。根据查询资料，方案大体都是使用canvas来播放，而有以下两个方案：

（1）使用jsmpeg框架（直播流有限制，支持ws和ts）

（2）直接使用canvas然后循环ctx.drawImage(videoElement,0,0,100,100)

6、如果android单纯的使用drawImage来播放视频会有兼容性的问题。如果是使用RTMP播放（也就是mp4），android5.0以下的版本会有黑屏的问题。而最好的就是使用HLS播放然后再使用drawImage播放