FLV视频播放器
简介Flv.js，是 bilibili（哔哩哔哩）在 Github 上开源的 HTML5 的 FLV 视频播放器，项目位于 https://github.com/bilibili/flv.js，目前版本为 v1.5.0。Flv.js 支持 H.264 + AAC/MP3 编码的 FLV 视频，支持视频分片，支持低延迟的 HTTP/WebSocket 协议的 FLV 格式的直播视频流，兼容 Chrome、Firefox、Safari 10、IE 11 和 Edge，具有极低的花费，支持浏览器硬件加速。事理上，Flv.js 把 FLV 视频流转码为 ISO BMFF（切片的MP4），然后把切片放到 HTML 的 video 元素中进行播放。
flv.js项目
安装
Flv.js 可以利用 NPM 直接安装，加入到前端项目依赖中：
npm install --save flv.js
也可以利用海内镜像的 CNPM 进行安装：
cnpm install --save flv.js
还可以在本地进行构建：
npm install # 安装开拓依赖npm install -g gulp # 安装构建工具 gulpgulp release # 构建发布
Flv.js 利用 ECMAScript 6 编写，利用 Babel Compiler 转译到 ECMAScript5，并利用 Browserify 进行打包。
示例
Flv.js 的架构设计如下：
Flv.js架构设计
核心部分为 FlvDemuxer 和 MP4Remuxer，分别对 FLV 视频进行分离，和封装为 MP4 视频。内部通过多个Controller掌握器，发送指令，对数据流的操作进行掌握。
Flv.js 利用大略，通过接口 createPlayer 实例化播放器，配置对应的视频源，然后，挂载到 DOM 容器上，并调用 load() 进行加载，调用 play() 进行播放：
<script src="flv.min.js"></script><video id="videoElement"></video><script> if (flvjs.isSupported()) { var videoElement = document.getElementById('videoElement'); var flvPlayer = flvjs.createPlayer({ type: 'flv', url: 'http://example.com/flv/video.flv' }); flvPlayer.attachMediaElement(videoElement); flvPlayer.load(); flvPlayer.play(); }</script>
把稳到，flv.js 供应了 isSupported 接口，可以很方便地判断 Flv.js 是否支持当前的浏览器环境。Flv.js供应了一个测试用的 demo 页面，可以进行视频播放的测试：
Flv.js demo
Flv.js 紧张供应了3个函数：
flvjs.createPlayer()：接管配置，实例化播放器flvjs.isSupported()：是否支持当前浏览器flvjs.getFeatureList()：支持的特性的列表还有3个类：
flvjs.FlvPlayer：FLV 播放器flvjs.NativePlayer：原生 HTML5 播放器，可以用户单 MP4 文件的播放flvjs.LoggingControl：日志掌握以及3个列举：
flvjs.Events：播放器事宜flvjs.ErrorTypes：缺点类型flvjs.ErrorDetails：缺点详细信息利用时的紧张接口是 createPlayer，它的函数署名如下：
function createPlayer(mediaDataSource: MediaDataSource, config?: Config): Player;
个中 mediaDataSource 进行视频流配置，常用的参数包括：
type：视频类型，flv 或 mp4isLive：是否为直播视频流cors：获取视频数据时是否启用 CORSurl：视频流地址segments：视频切片配置而 config 进行 flv.js 播放器内部配置，包括worker、缓存、加载策略等的配置。
对付体积较大的视频，每每在做事器中会进行切片处理。Flv.js 支持对付切片视频的加载播放，通过供应 segments 配置。segments 是一个切片配置的列表，每个配置包括了视频长度、文件大小和视频地址：
"segments": [ { "duration": 1234, // in milliseconds "filesize": 5678, // in bytes "url": "http://cdn.flvplayback.com/segments-1.flv" }, { "duration": 2345, "filesize": 6789, "url": "http://cdn.flvplayback.com/segments-2.flv" }, { "duration": 4567, "filesize": 7890, "url": "http://cdn.flvplayback.com/segments-3.flv" } // more segments... ]
Flv.js 支持直播视频流的播放，通过 isLive 配置实现，支持 HTTP 协议的视频流：
{ // HTTP FLV "type": "flv", "isLive": true, "url": "http://127.0.0.1:8080/live/livestream.flv"}
以及 WebSocket 协议的视频流：
{ // FLV over WebSocket "type": "flv", "isLive": true, "url": "ws://127.0.0.1:9090/live/livestream.flv"}
flv.js项目
总结
Flv.js 作为一个 HTML5 视频播放器，实现了通过原生 Javascript，在 HTML5 页面上进行 FLV 视频的播放，充分利用了 FLV 格式精良的体积和质量，供应了更为精良的播放体验，降落了视频做事器和负荷，同时支持切片、直播、
HTML5 + FLV
