flv.js视频播放库基本用法

安装

npm install --save flv.js

基本用法

player 对象源码 可查看有哪些方法和属性

若需要支持 flv 回放功能请使用 mpegts.js

假设存在一个 video 元素

<video id="videoElement"></video>

1. 先检测浏览器是否支持

   import flvjs from "flv.js"
   if (flvjs.isSupported()) {
       ...
   }
   

2. 获取 dom 元素

   let element = document.getElementsByName('videoElement')[0];
   或者 Vue
   let element = this.$refs.videoElement // 如果组件跟元素是 video 标签则 this.$el
   

3. 创建 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()
   

4. 播放\暂停

   // 播放
   player.play()
   // 暂停
   player.pause()
   

5. 调整播放位置

   player.currentTime = 5
   

6. 事件监听

   最好在创建完 player 就立刻监听事件。

   事件类型

   • flvjs.Events
   • flvjs.ErrorTypes
   • flvjs.ErrorDetails

   const listener = (err) => {
     console.log('player error', err)
   }
   // 监听
   player.on(flvjs.Events.ERROR, listener)
   
   //取消监听。或者 player.destroy() 时自动取消全部事件监听
   player.off(flvjs.Events.ERROR, listener)
   

7. 销毁、释放资源

   在创建前也可以检测是否已存在 player 对象，如果有必要，可以先销毁之前的 player 对象

   if (player != null) {
     player.pause()
     player.unload()
     player.detachMediaElement()
     player.destroy()
     player = null
   }
   

8. 设置全局日志等级

   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>

---

其他相关：

flv.js 怎么用？全面解读 flv.js 代码 - 冒雨 ing - 博客园 (cnblogs.com)