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播放