如何使用flv.js实现FLV视频的在线播放?

2026-03-31 15:241阅读0评论SEO问题
  • 内容介绍
  • 文章标签
  • 相关推荐

本文共计586个文字,预计阅读时间需要3分钟。

如何使用flv.js实现FLV视频的在线播放?

目录+简介+flv.js常用方法+flv.js简单使用+简介+Flv.js+是+HTML5+Flash+视频(FLV)播放器+纯原生+JavaScript+开发+,+没有+用到+Flash+。+由+bilibili+网站开源+。+其+工作原理+是将+FLV+文件流+转码+。

目录
  • 简介
  • flv.js常用方法
  • flv.js简单使用

如何使用flv.js实现FLV视频的在线播放?

简介

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 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格式媒体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使用内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络!

本文共计586个文字,预计阅读时间需要3分钟。

如何使用flv.js实现FLV视频的在线播放?

目录+简介+flv.js常用方法+flv.js简单使用+简介+Flv.js+是+HTML5+Flash+视频(FLV)播放器+纯原生+JavaScript+开发+,+没有+用到+Flash+。+由+bilibili+网站开源+。+其+工作原理+是将+FLV+文件流+转码+。

目录
  • 简介
  • flv.js常用方法
  • flv.js简单使用

如何使用flv.js实现FLV视频的在线播放?

简介

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 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格式媒体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使用内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络!