flv.js的具体使用教程
简介
Flv.js 是 HTML5 Flash 视频(FLV)播放器,纯原生 JavaScript 开发,没有用到 Flash。由 bilibili 网站开源。它的工作原理是将 FLV 文件流转码复用成 ISO BMFF(MP4 碎片)片段,然后通过 Media Source Extensions 将 MP4 片段喂进浏览器。
媒体部分
配置
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 class="lazy" data-src="">
</video>
2:js
(1):在index.xml文件中引入flv.js
<script class="lazy" data-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格式媒体URL
isLive: 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的具体使用教程的文章就介绍到这了,更多相关flv.js使用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341