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)