一、關于QQ瀏覽器 X5內核

Paste_Image.png

二、flv.js兼容性要求

參考介紹一下再微信內置瀏覽器的兼容性、關于瀏覽器兼容性問題的作者回復
沒記錯的話，目前的 X5 是一個基于舊版 Chromium 魔改的內核。
總之兩個必要條件：Media Source Extensions API 和 fetch+stream API 對 http-flv 是必須的
Due to IO restrictions, flv.js can support HTTP FLV live stream on Chrome 43+, FireFox 42+, Edge 15.15048+ and Safari 10.1+ for now.

1.MSE
主要是Safari和QQ瀏覽器不支持，具體參考H5直播系列二 MSE(Media Source Extensions)

2.Fetch or XHR
這個除IE都支持了，具體參見JS異步處理系列二 Fetch

3.flvjs提供的檢測方法
參考移動端報錯問題，調試window.MediaSource undefined
執(zhí)行前務必通過 flvjs.getFeatureList() 檢測環(huán)境支持度.mseFlvPlayback為true即可播放點播視頻，mseLiveFlvPlayback為true才可播放httpflv直播流

var fList:FlvJs.FeatureList = flvjs.getFeatureList();
"FlvPlay:"+fList.mseFlvPlayback+",LivePlay:"+fList.mseLiveFlvPlayback

經過測試，mseFlvPlayback和mseLiveFlvPlayback在QQ手機瀏覽器上都是undefined，沒戲了……

四、B站H5幫助頁面關于兼容性

Paste_Image.png

扒出來一點壓縮后的js:

function checkFormats(){
var e=document.createElement("video"),

t=function(e,t){
var i=document.getElementById(e);
i.innerHTML=t?"支持":"不支持",
i.className=i.className.replace(/\bunknown\b/,t?"success":"error")},
i=e&&e.canPlayType,
n=window.MediaSource,

a=function(t){
return n&&!n.isTypeSupported?e.canPlayType(t):n&&n.isTypeSupported(t)
}
,

l=function(){
var e=document.createElement("div"),
t="Khtml Ms O Moz Webkit".split(" "),
i=t.length;
return function(n){
if(n in e.style)return!0;
for(n=n.replace(/^[a-z]/,function(e){return e.toUpperCase()});i--;)
if(t[i]+n in e.style)return!0;return!1}}(),
o=function(){return!!document.createElement("canvas").getContext};

t("c-video",i),
t("c-mse",!!n),
t("c-h264",e&&e.canPlayType&&e.canPlayType('video/mp4; codecs="avc1.42001E, mp4a.40.2"')),
t("c-mse-h264",a('video/mp4; codecs="avc1.4d401e"')),
t("c-css3-dm",l("transition")&&l("transform")),
t("c-canvas-dm",o()),

document.getElementById("c-user-agent").innerHTML=navigator.userAgent
}

五、為什么國內大部分視頻廠商不對PC開放HTML5?

1.Flash 并不能完全被拋棄。HTML5 在 IE 瀏覽器里面，只在 IE 9 以上的版本才得到較好的支持，IE 8 及以下的版本，播放視頻的選擇還只能使用插件，而插件里面最主流的還只能是 Flash。雖然廠商完全可以提供雙版本，但是 Flash “能用”、“不能拋棄”的特點，一定程度上使視頻網站沒有急于去開發(fā) PC Web 端的 HTML5 播放器。

2.Flash 獲取很方便，裝機比例很高?，F(xiàn)在的國產瀏覽器，附送的內容除了全家桶以外，F(xiàn)lash 一般都會安裝好，就算是 Chrome 或者 Firefox 等國際上知名的主流瀏覽器，也會給予相當簡單的操作提示讓用戶很容易地安裝上 Flash。這個特點使得視頻網站也沒有必要那么著急去開發(fā) HTML5 播放器。（聽說 Chrome 馬上就取消自帶 Flash 了，歡呼雀躍）

3.視頻源存在兼容性問題。原生的 HTML5 <video> 元素在 Windows PC 上僅支持 mp4 （H.264 編碼）、webm、ogg 等格式視頻的播放。而由于歷史遺留問題（HTML5 視頻標準最終被廣泛支持以前，F(xiàn)lash 在 Web 視頻播放方面有著統(tǒng)治地位），視頻網站的視頻源和轉碼設置，很多都高清源都是適用于 Flash 播放的 FLV 格式，只有少量低清晰度視頻是 mp4 格式，webm 和 ogg 更是聽都沒聽說過。比如優(yōu)酷只有高清和標清才有 MP4 源，超清、1080P 等，基本都是 FLV 和 HLS（M3U8）的視頻源（在 Windows PC 上支持 M3U8 比支持 FLV 更復雜，我們不做過多贅述）。而騰訊視頻，因為轉型 MP4 比較早，視頻源幾乎全部都是 MP4 和 HLS，所以現(xiàn)在可以在 Mac OS X 上率先支持 PC Web 端的 HTML5 播放器（Safari 下 HLS、Chrome 下 MP4）。

4.MSE 技術資料較少。上面提到了視頻源的兼容性問題，但是 HTML5 是不是就真的沒辦法播放 FLV 等格式視頻了呢？不是。解決方案是 MSE，Media Source Extensions，就是說，HTML5 <video> 不僅可以直接播放上面支持的 mp4、m3u8、webm、ogg 格式，還可以支持由 JS 處理過后的視頻流，這樣我們就可以用 JS 把一些不支持的視頻流格式，轉化為支持的格式（如 H.264 的 mp4）。B 站前些天開源的 flv.js 就是這個技術的一個典型實現(xiàn)。B 站的 PC HTML5 播放器，就是用 MSE 技術，將 FLV 源用 JS 實時轉碼成 HTML5 支持的視頻流編碼格式（其實就一個文件頭的差異（這里文件頭改成容器。感謝評論區(qū)謙謙的指教，是容器的差異，容器不只是文件頭）），提供給 HTML5 播放器播放。這種技術，相較于其它成熟的播放方案而言，比較新穎，國內外資料都比較少，坑比較多，國內視頻網站自然不愿意去第一個吃螃蟹。B 站就是因為有這樣一位比較厲害的少年程序猿，單槍匹馬踩坑實現(xiàn)了 MSE 技術的播放（題外話，這樣一個牛逼的技術突破，作者在 B 站的待遇卻令人心寒，被逼辭職。怎么講呢，貴站可能倒閉但絕不會變質（手動滑稽）。參見：如何看待嗶哩嗶哩的 flv.js 作者月薪不到 5000 元？）。

5.HTML5 播放器容易被破解。現(xiàn)在互聯(lián)網環(huán)境下，資源盜版、盜鏈很常見。視頻網站們也在花大力氣防盜鏈。Flash 是插件，而且發(fā)展了這么多年，技術已經相當成熟，甚至可以做到在代碼中直接插入編譯好的 C 模塊（FlasCC 技術，原稱 Alchemy），很多視頻網站（比如優(yōu)酷和騰訊）的 Flash 播放器中都有破解難度相當大的 C 模塊。如果換成 HTML5 播放，由于 JS 代碼相當于開源的特性，破解者非常容易就可以下載、盜鏈播放視頻、跳過廣告（而廣告是視頻網站的主要營收）。

6.WebAssembly 技術尚未廣泛支持。上面說到，HTML5 代碼容易被破解。但其實也是有解決方案的，Web 項目中也可以插入編譯好的 C 模塊，這就是 WebAssembly 技術。B 站的 HTML5 播放器的加密部分就是用比 WebAssembly 初級一點的 asm.js 實現(xiàn)的，我嘗試破解時很頭大。但是，遺憾的是，絕大部分主流瀏覽器的主流版本暫未支持這一特性。(QQ,UC瀏覽器目前尚不支持)

7.可能看著別人都沒有，我也沒必要搞吧。國內主流視頻網站里面，只有 B 站（是的，你 B 網站排名早已超過愛奇藝樂視PPTV等，別再哭窮，別再二次元凈土了，早變質了）和騰訊視頻有 PC 端的 HTML5 播放器，其中騰訊視頻還只對 Mac OS X 開放（Flash 在 Macbook 上發(fā)熱嚴重）。