flv.js解析与使用

简介
Flv.js 是 HTML5 Flash 视频（FLV）播放器，纯原生 JavaScript 开发，没有用到 Flash。由 bilibili 网站开源。它的工作原理是将 FLV 文件流转码复用成 ISO BMFF（MP4 碎片）片段，然后通过 Media Source Extensions 将 MP4 片段喂进浏览器。
Github地址：https://github.com/Bilibili/flv.js/
flv.js demo地址：http://bilibili.github.io/flv.js/demo/
flv.js 文档：https://github.com/bilibili/flv.js/tree/master/docs

特征

FLV 容器，具有 H.264 + AAC 编解码器播放功能
多部分分段视频播放
HTTP FLV 低延迟实时流播放 FLV 通过WebSocket 实时流播放
兼容 Chrome, FireFox, Safari 10, IE11 和 Edge
十分低开销，并且通过你的浏览器进行硬件加速

媒体数据源

媒体部分

配置

flv.js常用方法
1：flvjs.isSupported()：判断当前浏览器是否支持播放
2：flvPlayer = flvjs.createPlayer(mediaDataSource: MediaDataSource, config?: Config)：创建一个播放实例
3：flvPlayer.attachMediaElement(mediaElement: HTMLMediaElement)：将播放实例注册到video节点
4：flvPlayer.load()：加载数据流
5：flvPlayer.play()：播放数据流
6：flvPlayer.pause()：暂停播放数据流
7：flvPlayer.unload()：取消数据流加载
8：flvPlayer.detachMediaElement()：将播放实例从节点中取出
9：flvPlayer.destroy()：销毁播放实例

flv.js简单使用
1：html

<video id="my-player" preload="auto" muted autoplay type="rtmp/flv"><source src="">
</video>

2：js
(1)：在index.xml文件中引入flv.js

 <script src="./flv.js/flv.min.js"></script>

(2)：使用flv.js实现播放flv格式流，获取video节点

videoElement = document.getElementById('my-player');
if (flvjs.isSupported()) {flvPlayer = flvjs.createPlayer({type: 'flv',                   //媒体类型url: 'XXXX'                     //flv格式媒体URLisLive: true,                   //数据源是否为直播流hasAudio: false,             //数据源是否包含有音频hasVideo: true,                 //数据源是否包含有视频enableStashBuffer: false        //是否启用缓存区},{enableWorker: false,            //不启用分离线程enableStashBuffer: false,      //关闭IO隐藏缓冲区autoCleanupSourceBuffer: true    //自动清除缓存});flvPlayer.attachMediaElement(videoElement);  //将播放实例注册到节点flvPlayer.load();                   //加载数据流flvPlayer.play();                    //播放数据流
}

(3)：关闭视频流

flvPlayer.pause();                       //暂停播放数据流
flvPlayer.unload();                     //取消数据流加载
flvPlayer.detachMediaElement();         //将播放实例从节点中取出
flvPlayer.destroy();                    //销毁播放实例

flv.js解析与使用相关推荐

（直播、监控）利用javacv解析rtsp流，转换为flv流，通过前端flv.js解析播放
前情提要:之前利用websocket解析过https://blog.csdn.net/IT_CREATE/article/details/105625858?spm=1001.2014.3001.55 ...
开发那些事儿：在Flv.js前端播放器中解析并绘制H.264编码中的SEI信息
流媒体中的SEI是指补充增强信息(Supplemental Enhancement Information),它提供了向视频码流中加入信息的办法,是H.264/H.265视频压缩标准的特性之一.SEI ...
Flv.js全面解析
Flv.js全面解析常见直播协议 Flv.js概览 Flv.js结构图架构图功能 API文档相关 MediaDataSource的字段列表如下, Config flvjs.getFeatureL ...
以flv.js框架为基础，替换flv格式视频
flv.js总结这两个月来,开展这个flv.js项目学到的新东西还挺多的,从理解flv.js框架,到理解flv视频格式,到理解公司自己的视频格式,当每一步都理解后,整个过程是比较顺利的,下面是我对这 ...
flv.js php,flv.js的使用详解
这次给大家带来flv.js的使用详解,使用flv.js的注意事项有哪些,下面就是实战案例,一起来看一下. Bilibili相信大家都不会陌生,而 Flv.js 就是由 bilibili 网站开源的 H ...
流媒体方案，技术开源项目，包含Java调用FFMpeg(FFCH4J)，推拉流服务器，nginx-http-flv-module，ckplayer，Flv.js，EasyPlayer.js集成
文章目录 streaming_media 介绍 ckplayer拉流播放软件介绍功能介绍软件架构安装教程使用说明 EasyPlayer.js拉流播放简介功能说明集成使用示例普通集成 ...
示例：使用 Flv.js 和 Reflv 播放视频
1.背景传统的播放视频是采用 flash 播放器方式,然而各大浏览器厂商都不再支持flash , 我们不得不寻找其他解决方案. 2.说明 2.1 Flv.js flv.js 是一个HTML5 Fla ...
整合SpringBoot + Nginx-http-flv-module + JavaCV(FFmpeg) RTSP推流，使用VUE + Flv.js播放
目录 1.安装nginx-rtmp-module 2.Maven引入JavaCV包 3.编写Java核心代码 4.VUE安装video.js和flv.js 5.编写前端测试代码 6.运行效果 1.安装 ...
使用 Flv.js 和 Reflv 播放视频
1.背景传统的播放视频是采用 flash 播放器方式,然而各大浏览器厂商都不再支持flash , 我们不得不寻找其他解决方案. 2.说明 2.1 Flv.js flv.js 是一个HTML5 Fla ...

flv.js解析与使用

flv.js解析与使用相关推荐

最新文章

热门文章