參考
想做移動端網頁視頻直播，請問除了 hls 之外還有其他可選方案嗎？

總結一下，除了flash方案外，基本都受限于MSE的兼容性問題。關于MSE，可以參考H5直播系列二 MSE(Media Source Extensions)

一、JWPlayer

https://support.jwplayer.com/
https://github.com/jwplayer/jwplayer
JWPlayer快速入門指南（中文）
JWPlayer 7的正確使用方法及Flash plugin failed to load解決方法
JW Player 使用 RTMP 流
jwplayer +ffmpeg+red5 實現(xiàn)攝像頭的直播

1.不支持移動端
RTMP Videos on mobile platform
RTMP renders in Flash mode and requires Flash for playback. Mobile devices don’t natively support Flash, that is why you are having issues with mobile.
Adaptive Streaming

2.不支持移動端
Error loading player: No playable sources found
On my machine IE 11 was working, but Firefox failed with message "Error loading player: No playable sources found" (because of missing Flash plugin).

二、百度音視頻cyberplayer

cyberplayerDemo

<div id="playercontainer"></div>
<script type="text/javascript" src="player/cyberplayer.js"></script>
<script type="text/javascript">
    var player = cyberplayer("playercontainer").setup({
        width: 680,
        height: 448,
        // <—rtmp or flv直播地址
        file: "rtmp://cyberplayerplay.kaywang.cn/cyberplayer/demo201711-L1",
        // <— 備用播放地址，為了手機上能進行直播，設置hls直播流
        fallbackfile: "http://cyberplayerplay.kaywang.cn/cyberplayer/demo201711-L1.m3u8", 
        autostart: true,
        stretching: "uniform",
        volume: 100,
        controls: true,
        ak: "xxxxxxxxxxxxxxxx" // 公有云平臺注冊即可獲得accessKey
    });
</script>

看起來是rtmp/flv+hls的，使用了video標簽。打開Chrome控制臺，可以找到加載的flv.js
注：在支持<a target="_blank">MediaSourceExtension的瀏覽器環(huán)境</a>，且播放地址支持跨域訪問（設置了Access-Control-Allow-Origin），則播放器使用H5來播放flv視頻。''其他pc上，系統(tǒng)自動加載flash進行播放。<br/>目前手機上還不支持播放flv格式視頻。
在hls.js也有類似描述
'注：在非IE環(huán)境下必須引入3個videojs文件！否則只能用flash來播放<br />' + '兼容性：高優(yōu)使用H5播放器，在不支持MSE的環(huán)境上自動加載flash進行播放<br />' + '大部分手機瀏覽器上都原生支持hls播放，但部分android上的瀏覽器原生不支持'

三、videojs

參考搭建rtmp直播流服務之4:videojs和ckPlayer開源播放器二次開發(fā)(播放rtmp、hls直播流及普通視頻)

Paste_Image.png

四、flv.js

flv.js works by transmuxing FLV file stream into ISO BMFF (Fragmented MP4) segments, followed by feeding mp4 segments into an HTML5 <video> element through Media Source Extensions API.
flv.js is written in ECMAScript 6, transpiled into ECMAScript 5 by Babel Compiler, and bundled with Browserify.

參考
Bilibili/flv.js
如何看待嗶哩嗶哩的開源 HTML5 播放器內核 flv.js?
作者謙謙談開發(fā)flv.js歷程
FLV.JS 代碼解讀--demux部分
B站視頻開源代碼flv.js的使用部署心得（代碼案例應用）
Bilibili 向 HTML5 進發(fā)，播放器內核 flv.js 開源
//issues begin
mseFlvPlayback為true即可播放點播視頻，mseLiveFlvPlayback為true才可播放httpflv直播流
flv直播流在chrome下播放
關于不能直播FLV流的理解
作者大大，請問一下，我在谷歌瀏覽器上的話，是秒開視頻，但是到了Safari，手機上就都不行了，請問是為啥？
MSE 瀏覽器兼容性問題
//issues end

五、hls.js

hls.js is a JavaScript library which implements an HTTP Live Streaming client. It relies on HTML5 video and MediaSource Extensions for playback.

參考
hls.js 源碼解讀【1】
hls.js 源碼解讀【2】
hls.js 源碼解讀【3】

六、shaka-player

Shaka Player is an open-source JavaScript library for adaptive media. It plays adaptive media formats (such as DASH and HLS) in a browser, without using plugins or Flash. Instead, Shaka Player uses the open web standards MediaSource Extensions and Encrypted Media Extensions.

參考谷歌開源 H5 流媒體播放器 shaka-player 初探

七、純 JS 實現(xiàn)的視頻解碼器

參考HTML5 視頻直播（二）
1.Broadway 是一個 H.264 解碼器，使用 Emscripten 工具從 Android 的 H.264 解碼器轉化而成，它還針對 WebGL 做了一些優(yōu)化。這個解碼器支持 mp4 后綴的視頻文件，有一些限制：不支持 weighted prediction for P-frames 和 CABAC entropy encoding。例如 iPhone 拍攝的視頻它就不支持，可以用 FFmpeg 轉一下

在虛擬桌面網頁版實時音視頻直播方案中，作者提到在github上有一個demo，經過測試，broadway解碼效率不高。（測試環(huán)境 chrome book） 參考https://github.com/131/h264-live-player。同時作者還提到了https://github.com/ChihChengYang/wfs.js，這個方案使用websocket 從服務端傳輸h264編碼數(shù)據到瀏覽器， 在瀏覽器端使用JS 解析h264數(shù)據 ， 封裝成fMP4 fragment, 喂給media source 中的sourceBuffer， 瀏覽器video tag自動獲取sourceBuffer中的數(shù)據進行解碼渲染。

2.jsmpeg 則是一個 MPEG1 解碼器，它是由作者從零編寫出來的，并不像 Broadway 那樣是從其他語言翻譯而成，所以代碼可讀性要好很多，代碼也更輕量級。jsmpeg 也對視頻文件編碼方式有一些要求：不支持 B-Frames，視頻寬度必須是 2 的倍數(shù)。

    <canvas id="video-canvas"></canvas>
    <script type="text/javascript" src="jsmpeg.min.js"></script>
    <script type="text/javascript">
        var canvas = document.getElementById('video-canvas');
        var url = 'ws://'+document.location.hostname+':8082/';
        var player = new JSMpeg.Player(url, {canvas: canvas});
    </script>

3.prism.js
參考Web端解碼視頻流：（Part1 純Java Script 解碼[不建議大家這樣做，因為普適性不強]）

八、MonaClient

用Html5技術播放rtmp視頻直播流的方案，采用本人開發(fā)的csharprtmp作為服務器，Broadway作為視頻解碼方案，speex.js作為音頻解碼方案，emscripten作為編譯器的創(chuàng)新技術，需要瀏覽器支持AudioContext，WebSocket，webgl（可選），TypedArray,等H5功能支持才可以正常使用。ns.initAudio(50);這段代表音頻緩沖50幀播放，因為實際測試發(fā)現(xiàn)，不緩沖的話聲音播放不出來
參考
MonaClients
MonaClient測試地址
使用JS實現(xiàn)RTMP協(xié)議直播（三）
H5RtmpClient 詳細介紹
speex移植到crotex-M4，注意事項
LEBO游戲 Laya+MonaClient

2018.11.07更新
這里同樣原理的方案還有OV視云，在監(jiān)控直播中打開ovplayer.min.js可以看到Broadway的身影

九、Laya引擎未來支持度

參考希望和FLASH一樣支持RTMP視頻直播流
由于LayaFlash主要是以游戲移植和游戲開發(fā)為主，layaFlash的引擎類庫也并不是支持所有的flash API，目前主要是以實現(xiàn)游戲功能API為主。類似即時串流的播放、視頻（RTMP）、流式播放、p2p、聊天、攝像頭等功能我們暫時不會考慮去支持。