安装
npm install --save flv.js
基本用法
player 对象源码 可查看有哪些方法和属性
若需要支持 flv 回放功能请使用 mpegts.js
假设存在一个 video 元素
<video id="videoElement"></video>
-
先检测浏览器是否支持
import flvjs from "flv.js" if (flvjs.isSupported()) { ... }
-
获取 dom 元素
let element = document.getElementsByName('videoElement')[0]; 或者 Vue let element = this.$refs.videoElement // 如果组件跟元素是 video 标签则 this.$el
-
创建 player 对象并挂载到 dom 元素
flvjs.createPlayer() 参数详细介绍
let player = flvjs.createPlayer( { type: 'flv', // 类型只有 flv 和 mp4 url: 'http://example.com/flv/video.flv' }, { enableWorker: false, lazyLoadMaxDuration: 3 * 60, seekType: 'range' } ) player.attachMediaElement(element) player.load()
-
播放\暂停
// 播放 player.play() // 暂停 player.pause()
-
调整播放位置
player.currentTime = 5
-
事件监听
最好在创建完 player 就立刻监听事件。
事件类型
const listener = (err) => { console.log('player error', err) } // 监听 player.on(flvjs.Events.ERROR, listener) //取消监听。或者 player.destroy() 时自动取消全部事件监听 player.off(flvjs.Events.ERROR, listener)
-
销毁、释放资源
在创建前也可以检测是否已存在 player 对象,如果有必要,可以先销毁之前的 player 对象
if (player != null) { player.pause() player.unload() player.detachMediaElement() player.destroy() player = null }
-
设置全局日志等级
flvjs.LoggingControl.applyConfig({ globalTag: 'flv.js', enableVerbose: true, enableDebug: true, enableInfo: true, enableWarn: true, enableError: true, forceGlobalTag: false, enableCallback: false })
接口定义
interface Player {
constructor(mediaDataSource: MediaDataSource, config?: Config): Player;
destroy(): void;
on(event: string, listener: Function): void;
off(event: string, listener: Function): void;
attachMediaElement(mediaElement: HTMLMediaElement): void;
detachMediaElement(): void;
load(): void;
unload(): void;
play(): Promise<void>;
pause(): void;
type: string;
buffered: TimeRanges;
duration: number;
volume: number;
muted: boolean;
currentTime: number;
mediaInfo: Object;
statisticsInfo: Object;
}
完整示例
<script src="flv.min.js"></script>
<video id="videoElement"></video>
<script>
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement')
var flvPlayer = flvjs.createPlayer({
type: 'flv',
url: 'http://example.com/flv/video.flv'
})
flvPlayer.attachMediaElement(videoElement)
flvPlayer.load()
flvPlayer.play()
}
</script>
其他相关: