Flv视频播放器(flv视频的flv.js-HTML5播放器)
FLV(Flash Video)流媒体格式是随着Flash MX的引入而开发的视频格式。它的文件大小很小，通常每分钟只有1MB，是普通视频文件大小的1/3，视频质量好，因此受到视频网站的广泛欢迎。然而，FLV格式经常使用Flash Player解码和播放，但如今，主流浏览器已经放弃支持Flash Playe。同时，HTML5的原生视频标签不支持FLV格式。在HTML5时代，我们如何利用FLV视频格式？作为一个蓬勃发展的视频网站，哔哩哔哩开放了FLV视频的HTML5播放器，这使得HTML5可以与FLV结合。
FLV视频播放器
简介
Flv.js是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直接安装，并添加到前端项目依赖项中:
npminstall–saveflv.js
您也可以使用家用镜子的CNPM进行安装:
cnpminstall–saveflv.js
您也可以在本地构建:
npminstall#安装开发依赖npminstall-ggulp#安装构建工具gulpgulprelease#构建发布
Flv.js用ECMAScript 6编写，Babel编译器翻译成ECMAScript5，Browserify打包。
例子
Flv.js的架构设计如下:
Flv.js架构设计
核心部分是FlvDemuxer和MP4Remuxer，将FLV视频分离出来，打包成MP4视频。通过多个内部控制器，发送指令来控制数据流的运行。
Flv.js很好用。通过接口createPlayer实例化播放器，配置相应的视频源，然后挂载到DOM容器上，调用load()加载，调用play()播放:
if(flvjs.isSupported()){varvideoElement=document.getElementById(‘videoElement’);varflvPlayer=flvjs.createPlayer({type:’flv’,url:’http://example.com/flv/video.flv’});flvPlayer.attachMediaElement(videoElement);flvPlayer.load();flvPlayer.play();}
注意Flv.js提供了一个isSupported接口，可以很容易的判断flv.js是否支持当前的浏览器环境。Flv.js提供了测试用的演示页面，可以测试视频播放:
Flv.js演示
Flv.js主要提供3个功能:
Flvjs.createPlayer():接受配置并实例化播放器。
Flvjs.isSupported():支持当前浏览器吗？
Flvjs.getFeatureList():支持的功能列表
还有三个类别:
Flvjs。FlvPlayer:FLV播放器
Flvjs。NativePlayer:一个原生HTML5播放器，可以用来播放单个MP4文件。
Flvjs。日志控制:日志控制
和三个枚举:
Flvjs。事件:玩家事件
Flvjs。错误类型:错误类型
Flvjs。错误细节:错误细节
使用的主界面是createPlayer，其函数签名如下:
functioncreatePlayer(mediaDataSource:MediaDataSource,config?:Config):Player;
mediaDataSource配置视频流，常用的参数包括:
类型:视频类型，flv或mp4。
是:是视频直播流吗？
Cors:采集视频数据时是否启用了CORS？
Url:视频流地址
分段:视频切片配置
Config执行flv.js player的内部配置，包括worker、cache和加载策略的配置。
对于大视频，往往是在服务器切片。Flv.js支持切片视频的加载和播放，通过提供片段来配置。Segments是切片配置的列表，每个配置包括视频长度、文件大小和视频地址:
“segments”:[{“duration”:1234,//inmilliseconds”filesize”:5678,//inbytes”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”}//moresegments…]
Flv.js支持视频直播流的广播，通过isLive配置实现，支持HTTP协议的视频流:
{//HTTPFLV”type”:”flv”,”isLive”:true,”url”:”http://127.0.0.1:8080/live/livestream.flv”}
以及WebSocket协议的视频流:
{//FLVoverWebSocket”type”:”flv”,”isLive”:true,”url”:”ws://127.0.0.1:9090/live/livestream.flv”}
Flv.js项目
摘要
Flv.js作为HTML5视频播放器，通过原生Javascript实现了HTML5页面上Flv视频的播放，充分利用了FLV格式优秀的音量和质量，提供了更好的播放体验，降低了视频服务器和负载，支持切片、直播、懒人加载等高级功能，功能丰富。Flv.js已经在视频广播网站中广泛使用，用户众多，代码质量高，值得使用、研究和学习。
HTML5 + FLV
