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

关键词：视频播放器