flv视频播放器（Flv。jsFLV视频的HTML5播放器）

　　flv视频播放器（Flv。jsFLV视频的HTML5播放器）
　　FLV（FlashVideo）流媒体格式，是随着FlashMX的推出发展而来的视频格式。其文件体积小，一般1分钟只占1MB，是普通视频文件大小的13，且视频质量良好，广受视频网站欢迎。然而，FLV格式往往利用FlashPlayer进行解码播放，但如今，主流浏览器都已经放弃支持FlashPlaye。同时，HTML5原生的video标签并不支持FLV格式。如何在HTML5时代，还能发挥FLV视频格式的优势呢？作为一个蓬勃发展中的视频网站，bilibili开源了FLV视频的HTML5播放器，使得HTML5与FLV得以结合。
　　FLV视频播放器简介
　　Flv。js，是bilibili（哔哩哔哩）在Github上开源的HTML5的FLV视频播放器，项目位于
　　https：github。combilibiliflv。js，目前版本为v1。5。0。Flv。js支持H。264AACMP3编码的FLV视频，支持视频分片，支持低延迟的HTTPWebSocket协议的FLV格式的直播视频流，兼容Chrome、Firefox、Safari10、IE11和Edge，具有极低的消耗，支持浏览器硬件加速。原理上，Flv。js把FLV视频流转码为ISOBMFF（切片的MP4），然后把切片放到HTML的video元素中进行播放。
　　flv。js项目安装
　　Flv。js可以使用NPM直接安装，加入到前端项目依赖中：npminstallsaveflv。js
　　也可以使用国内镜像的CNPM进行安装：cnpminstallsaveflv。js
　　还可以在本地进行构建：npminstall安装开发依赖npminstallggulp安装构建工具gulpgulprelease构建发布
　　Flv。js使用ECMAScript6编写，使用BabelCompiler转译到ECMAScript5，并使用Browserify进行打包。
　　示例
　　Flv。js的架构设计如下：
　　Flv。js架构设计
　　核心部分为FlvDemuxer和MP4Remuxer，分别对FLV视频进行分离，和封装为MP4视频。内部通过多个Controller控制器，发送指令，对数据流的操作进行控制。
　　Flv。js使用简单，通过接口createPlayer实例化播放器，配置对应的视频源，然后，挂载到DOM容器上，并调用load（）进行加载，调用play（）进行播放：lt；scriptsrcflv。min。jsgt；lt；scriptgt；lt；videoidvideoElementgt；lt；videogt；lt；scriptgt；if（flvjs。isSupported（））｛varvideoElementdocument。getElementById（39；videoElement39；）；varflvPlayerflvjs。createPlayer（｛type：39；flv39；，url：39；http：example。comflvvideo。flv39；｝）；flvPlayer。attachMediaElement（videoElement）；flvPlayer。load（）；flvPlayer。play（）；｝lt；scriptgt；
　　注意到，flv。js提供了isSupported接口，可以很方便地判断Flv。js是否支持当前的浏览器环境。Flv。js提供了一个测试用的demo页面，可以进行视频播放的测试：
　　Flv。jsdemo
　　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，它的函数签名如下：functioncreatePlayer（mediaDataSource：MediaDataSource，config？：Config）：Player；
　　其中mediaDataSource进行视频流配置，常用的参数包括：
　　type：视频类型，flv或mp4
　　isLive：是否为直播视频流
　　cors：获取视频数据时是否启用CORS
　　url：视频流地址
　　segments：视频切片配置
　　而config进行flv。js播放器内部配置，包括worker、缓存、加载策略等的配置。
　　对于体积较大的视频，往往在服务器中会进行切片处理。Flv。js支持对于切片视频的加载播放，通过提供segments配置。segments是一个切片配置的列表，每个配置包括了视频长度、文件大小和视频地址：segments：〔｛duration：1234，inmillisecondsfilesize：5678，inbytesurl：http：cdn。flvplayback。comsegments1。flv｝，｛duration：2345，filesize：6789，url：http：cdn。flvplayback。comsegments2。flv｝，｛duration：4567，filesize：7890，url：http：cdn。flvplayback。comsegments3。flv｝moresegments。。。〕
　　Flv。js支持直播视频流的播放，通过isLive配置实现，支持HTTP协议的视频流：｛HTTPFLVtype：flv，isLive：true，url：http：127。0。0。1：8080livelivestream。flv｝
　　以及WebSocket协议的视频流：｛FLVoverWebSockettype：flv，isLive：true，url：ws：127。0。0。1：9090livelivestream。flv｝
　　flv。js项目总结
　　Flv。js作为一个HTML5视频播放器，实现了通过原生Javascript，在HTML5页面上进行FLV视频的播放，充分利用了FLV格式优秀的体积和质量，提供了更为优秀的播放体验，降低了视频服务器和负荷，同时支持切片、直播、懒加载等进阶特性，功能丰富。Flv。js目前已被广泛应用到视频播放网站中，使用者众多，同时代码质量高，值得使用、研究和学习。
　　HTML5FLV