H5直播系列七 flv.js浏览器兼容性

一、关于QQ浏览器 X5内核

Paste_Image.png

1.PC上的极速模式没问题。IE模式使用的是IE8，所以各种没戏
2.移动版的X5内核是腾讯基于优秀开源Webkit 深度优化的浏览器渲染引擎，搭载在最新一代的手机QQ浏览器上
微信内置浏览器 x5内核有哪些坑及解决方案？
微信内置浏览器对于 HTML5 的支持如何？
QQ浏览器x5内核的兼容性问题
Layabox 解读微信全面升级 X5 Blink 内核
X5即将升级内核到Blink
总的来说，自从微信 2016年4月升级 X5 Blink内核之后，兼容性大大好转。安卓版的微信浏览器，全面升级为 TBS2.0 (基于Android 5.0 WebView Blink内核，Chrome 37），所有版本的安卓系统均为同一内核，开发只需考虑适屏问题了，HTML5和CSS3均有较好的支持（基于Chrome 37，详情可以上caniuse查）。IOS虽说没有升级统一为同一版本的内核，但IOS版本的微信一直是WKWebView内核,WKWebView的版本依赖于IOS的版本。 IOS 8.0（下文有IOS8以下系统的占比，可忽略）以上的系统，对Html5和css3的支持率也很高，基本的H5，CSS3的特性均得到支持，测试中有详细数据。
基于微信的直播方式

二、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

4.MSE 技术资料较少。上面提到了视频源的兼容性问题，但是 HTML5 是不是就真的没办法播放 FLV 等格式视频了呢？不是。解决方案是 MSE，Media Source Extensions，就是说，HTML5

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 上发热严重）。

H5直播系列七 flv.js浏览器兼容性

一、关于QQ浏览器 X5内核

二、flv.js兼容性要求

四、B站H5帮助页面关于兼容性

五、为什么国内大部分视频厂商不对PC开放HTML5?

你可能感兴趣的:(H5直播系列七 flv.js浏览器兼容性)