FLV(Flash Video)流媒体格式,是随着 Flash MX 的推出发展而来的视频格式。其文件体积小,一般1分钟只占1MB,是普通视频文件大小的1/3,且视频质量良好,广受视频网站欢迎。然而,FLV 格式往往利用 Flash Player 进行解码播放,但如今,主流浏览器都已经放弃支持 Flash Playe。同时,HTML5 原生的 video 标签并不支持 FLV 格式。如何在 HTML5 时代,还能发挥 FLV 视频格式的优势呢?作为一个蓬勃发展中的视频网站,bilibili 开源了 FLV 视频的 HTML5 播放器,使得 HTML5 与 FLV 得以结合。
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 直接安装,加入到前端项目依赖中:
也可以使用国内镜像的 CNPM 进行安装:
还可以在本地进行构建:
Flv.js 使用 ECMAScript 6 编写,使用 Babel Compiler 转译到 ECMAScript5,并使用 Browserify 进行打包。
Flv.js 的架构设计如下:
Flv.js架构设计
核心部分为 FlvDemuxer 和 MP4Remuxer,分别对 FLV 视频进行分离,和封装为 MP4 视频。内部通过多个Controller控制器,发送指令,对数据流的操作进行控制。
Flv.js 使用简单,通过接口 createPlayer 实例化播放器,配置对应的视频源,然后,挂载到 DOM 容器上,并调用 load() 进行加载,调用 play() 进行播放:
注意到,flv.js 提供了 isSupported 接口,可以很方便地判断 Flv.js 是否支持当前的浏览器环境。Flv.js提供了一个测试用的 demo 页面,可以进行视频播放的测试:
Flv.js demo
Flv.js 主要提供了3个函数:
还有3个类:
以及3个枚举:
使用时的主要接口是 createPlayer,它的函数签名如下:
其中 mediaDataSource 进行视频流配置,常用的参数包括:
而 config 进行 flv.js 播放器内部配置,包括worker、缓存、加载策略等的配置。
对于体积较大的视频,往往在服务器中会进行切片处理。Flv.js 支持对于切片视频的加载播放,通过提供 segments 配置。segments 是一个切片配置的列表,每个配置包括了视频长度、文件大小和视频地址:
Flv.js 支持直播视频流的播放,通过 isLive 配置实现,支持 HTTP 协议的视频流:
以及 WebSocket 协议的视频流:
Flv.js 作为一个 HTML5 视频播放器,实现了通过原生 Javascript,在 HTML5 页面上进行 FLV 视频的播放,充分利用了 FLV 格式优秀的体积和质量,提供了更为优秀的播放体验,降低了视频服务器和负荷,同时支持切片、直播、懒加载等进阶特性,功能丰富。Flv.js 目前已被广泛应用到视频播放网站中,使用者众多,同时代码质量高,值得使用、研究和学习。
本文由知识库于2021-09-13发表在龙哥云资源网,如有疑问,请联系我们。本文链接:https://www.longgeyun.com/knowledge/3417.html
上一篇自动化测试工具开发用什么语言(页面自动化测试工具使用)
下一篇计算机设计大赛含金量高吗(简述acm竞赛的含金量)
高校最常见的食物中毒有哪些
急性肠胃炎与食物中毒怎么分辨
莫代尔面料和纯棉面料哪个好内裤 哪个儿童可以穿
为什么说开速腾的都不是一般人 速腾开出去有面子吗
活珠子和毛蛋的区别在哪里 哪个好吃
家里放石头的八大禁忌有哪些 家中石头最佳摆放位置
怎么判断自己帅还是丑男 男生怎样越长越帅
单身女生红绳戴左手还是右手 女生红绳戴哪里合适
Pr2020零基础快速入门
文字转语音App最新版3.0
APP下载页源码-带后台