flv.js浏览器兼容性
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.
一、首先要支持H5的Video标签
为什么用ie浏览器打不开用layaair项目
IE9以上（包含IE9）才支持HTML5，而且支持的还是不够全面。
Paste_Image.png
二、QQ浏览器
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
参考使用 MediaSource 搭建流式播放器
1.MSE
Media Source Extensions（MSE）是Chrome、Safari、Edge等主流浏览器支持的一个新的Web API。MSE是一个W3C标准，允许JavaScript动态构建<video>和<audio>的媒体流。它定义了对象，允许JavaScript传输媒体流片段到一个 HTMLMediaElement。
通过使用MSE，你可以动态地修改媒体流而不需要任何插件。这让前端JavaScript可以做更多的事情—— 在JavaScript进行转封装、处理，甚至转码。
虽然MSE不能让流直接传输到media tags上，但是MSE提供了构建跨浏览器播放器的核心技术，让浏览器通过JavaScript API来推音视频到media tags上。
允许js在一定程度上操作音频视频流，我觉得最直接的例子是允许js写media player支持一些浏览器不支持的格式(个人理解)。
Q2：MSE客户端做很多东西，可以转码、解码， 这个会有性能问题吗？ 还有这个技术，目前有公司在大批量用吗？
A2：目前该技术在实验阶段，转封装的话，对性能要求不高，我们在各自型号的手机上测试都没有问题。目前除了微信内置浏览器对MSE支持不好，大部分浏览器对MSE支持都比较好。
Q5：哔哩哔哩H5播放器是基于WebSocket与MSE技术实现的嘛？
A5：B站开源的flv.js是一个非常好的项目，是基于 MSE 实现的，实时性做的也比较好，B 站自己已经在网站播放器上使用了。
以下参考全面进阶 H5 直播
Media Source Extensions
在没有 MSE 出现之前，前端对 video 的操作，仅仅局限在对视频文件的操作，而并不能对视频流做任何相关的操作。现在 MSE 提供了一系列的接口，使开发者可以直接提供 media stream。
那 MSE 是如何完成视频流的加载和播放呢？这可以参考 google 的 MSE 简介
var vidElement = document.querySelector('video');
if (window.MediaSource) {
var mediaSource = new MediaSource();
vidElement.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', sourceOpen);
} else {
console.log("The Media Source Extensions API is not supported.")
}
function sourceOpen(e) {
URL.revokeObjectURL(vidElement.src);
var mime = 'video/webm; codecs="opus, vp9"';
var mediaSource = e.target;
var sourceBuffer = mediaSource.addSourceBuffer(mime);
var videoUrl = 'droid.webm';
fetch(videoUrl)
.then(function(response) {
return response.arrayBuffer();
})
.then(function(arrayBuffer) {
sourceBuffer.addEventListener('updateend', function(e) {
if (!sourceBuffer.updating && mediaSource.readyState === 'open') {
mediaSource.endOfStream();
}
});
sourceBuffer.appendBuffer(arrayBuffer);
});
}
可以从上面的代码看出，一套完整的执行代码，不仅需要使用 MSE 而且，还有一下这些相关的 API。
HTMLVideoElement.getVideoPlaybackQuality()
SourceBuffer
SourceBufferList
TextTrack.sourceBuffer
TrackDefault
TrackDefaultList
URL.createObjectURL()
VideoPlaybackQuality
VideoTrack.sourceBuffer
我们简单讲解一下上面的流程。根据 google 的阐述，整个过程可以为：
Paste_Image.png
第一步，通过异步拉取数据。
第二步，通过 MediaSource 处理数据。
第三步，将数据流交给 audio/video 标签进行播放。
2.Fetch or XHR
多年来，XMLHttpRequest一直是web开发者的亲密助手。无论是直接的，还是间接的， 当我们谈及Ajax技术的时候，通常意思就是基于XMLHttpRequest
的Ajax，它是一种能够有效改进页面通信的技术。 Ajax的兴起是由于Google的Gmail所带动的，随后被广泛的应用到众多的Web产品（应用）中，可以认为， 开发者已经默认将XMLHttpRequest作为了当前Web应用与远程资源进行通信的基础。 而本文将要介绍的内容则是XMLHttpRequest的最新替代技术——Fetch API， 它是W3C的正式标准.
深入浅出Fetch API
传统 Ajax 已死，Fetch 永生
使用 Fetch
3.参考介绍一下再微信内置浏览器的兼容性
没记错的话，目前的 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.
4.参考移动端报错问题，调试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，没戏了……
5.在TBS3.0的更新日志里,内核基准从Chrome M37升至M53版本，Fetch getUserMedia/Stream API 都会支持，不过MSE没看到。所以微信和QQ浏览器对flv.js的全面支持还很遥远……目前只能用chrome浏览器观看直播。关于这个问题的作者回复
四、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 实现的，我尝试破解时很头大。但是，遗憾的是，绝大部分主流浏览器的主流版本暂未支持这一特性。
7.可能看着别人都没有，我也没必要搞吧。国内主流视频网站里面，只有 B 站（是的，你 B 网站排名早已超过爱奇艺乐视PPTV等，别再哭穷，别再二次元净土了，早变质了）和腾讯视频有 PC 端的 HTML5 播放器，其中腾讯视频还只对 Mac OS X 开放（Flash 在 Macbook 上发热严重）。
end
