一、关于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
执行前务必通过 flvjs.getFeatureList() 检测环境支持度.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 “能用”、“不能抛弃”的特点，一定程度上使视频网站没有急于去开发 PC Web 端的 HTML5 播放器。

2.Flash 获取很方便，装机比例很高。现在的国产浏览器，附送的内容除了全家桶以外，Flash 一般都会安装好，就算是 Chrome 或者 Firefox 等国际上知名的主流浏览器，也会给予相当简单的操作提示让用户很容易地安装上 Flash。这个特点使得视频网站也没有必要那么着急去开发 HTML5 播放器。（听说 Chrome 马上就取消自带 Flash 了，欢呼雀跃）

3.视频源存在兼容性问题。原生的 HTML5 <video> 元素在 Windows PC 上仅支持 mp4 （H.264 编码）、webm、ogg 等格式视频的播放。而由于历史遗留问题（HTML5 视频标准最终被广泛支持以前，Flash 在 Web 视频播放方面有着统治地位），视频网站的视频源和转码设置，很多都高清源都是适用于 Flash 播放的 FLV 格式，只有少量低清晰度视频是 mp4 格式，webm 和 ogg 更是听都没听说过。比如优酷只有高清和标清才有 MP4 源，超清、1080P 等，基本都是 FLV 和 HLS（M3U8）的视频源（在 Windows PC 上支持 M3U8 比支持 FLV 更复杂，我们不做过多赘述）。而腾讯视频，因为转型 MP4 比较早，视频源几乎全部都是 MP4 和 HLS，所以现在可以在 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 就是这个技术的一个典型实现。B 站的 PC HTML5 播放器，就是用 MSE 技术，将 FLV 源用 JS 实时转码成 HTML5 支持的视频流编码格式（其实就一个文件头的差异（这里文件头改成容器。感谢评论区谦谦的指教，是容器的差异，容器不只是文件头）），提供给 HTML5 播放器播放。这种技术，相较于其它成熟的播放方案而言，比较新颖，国内外资料都比较少，坑比较多，国内视频网站自然不愿意去第一个吃螃蟹。B 站就是因为有这样一位比较厉害的少年程序猿，单枪匹马踩坑实现了 MSE 技术的播放（题外话，这样一个牛逼的技术突破，作者在 B 站的待遇却令人心寒，被逼辞职。怎么讲呢，贵站可能倒闭但绝不会变质（手动滑稽）。参见：如何看待哔哩哔哩的 flv.js 作者月薪不到 5000 元？）。

5.HTML5 播放器容易被破解。现在互联网环境下，资源盗版、盗链很常见。视频网站们也在花大力气防盗链。Flash 是插件，而且发展了这么多年，技术已经相当成熟，甚至可以做到在代码中直接插入编译好的 C 模块（FlasCC 技术，原称 Alchemy），很多视频网站（比如优酷和腾讯）的 Flash 播放器中都有破解难度相当大的 C 模块。如果换成 HTML5 播放，由于 JS 代码相当于开源的特性，破解者非常容易就可以下载、盗链播放视频、跳过广告（而广告是视频网站的主要营收）。

6.WebAssembly 技术尚未广泛支持。上面说到，HTML5 代码容易被破解。但其实也是有解决方案的，Web 项目中也可以插入编译好的 C 模块，这就是 WebAssembly 技术。B 站的 HTML5 播放器的加密部分就是用比 WebAssembly 初级一点的 asm.js 实现的，我尝试破解时很头大。但是，遗憾的是，绝大部分主流浏览器的主流版本暂未支持这一特性。(QQ,UC浏览器目前尚不支持)

7.可能看着别人都没有，我也没必要搞吧。国内主流视频网站里面，只有 B 站（是的，你 B 网站排名早已超过爱奇艺乐视PPTV等，别再哭穷，别再二次元净土了，早变质了）和腾讯视频有 PC 端的 HTML5 播放器，其中腾讯视频还只对 Mac OS X 开放（Flash 在 Macbook 上发热严重）。