sfidea/flvextend

基于 flv.js 的功能扩展插件（追帧、断流重连、实时更新）

flvExtend.js

基于 flv.js 的功能扩展插件

对 flv.js 的一些常见问题，形成解决方案并进行封装

见文章：flv.js 追帧、断流重连及实时更新的直播优化方案

特性

• 追帧
• 断流重连
• 实时更新视频
• 解决 stuck 问题

Demo

https://shady-xia.github.io/flvExtend

安装及使用

npm install flv-extend -S

import FlvExtend from 'flv-extend'

const videoElement = document.getElementById('video')

// 配置需要的功能
const flv = new FlvExtend({
  element: videoElement, // *必传
  frameTracking: true, // 开启追帧设置
  updateOnStart: true, // 点击播放后更新视频
  updateOnFocus: true, // 获得焦点后更新视频
  reconnect: true, // 开启断流重连
  reconnectInterval: 0 // 断流重连间隔
})

// 调用 init 方法初始化视频
// init 方法的参数与 flvjs.createPlayer 相同，并返回 flvjs.player 实例
const player = flv.init(
  {
    type: 'flv',
    url: 'http://192.168.0.11/stream',
    isLive: true
  },
  {
    enableStashBuffer: false, // 如果您需要实时（最小延迟）来进行实时流播放，则设置为false
    autoCleanupSourceBuffer: true, // 对SourceBuffer进行自动清理
    stashInitialSize: 128 // 减少首帧显示等待时长
  }
)

// 直接调用play即可播放
player.play()

API

FlvExtend

constructor

实例化 FlvExtend

new FlvExtend(Options)

Options 选项如下：

字段	类型	默认值	描述
element	HTMLElement	无	*必填，video 标签的 dom
frameTracking	boolean	false	是否开启追帧设置
updateOnStart	boolean	false	点击播放按钮后实时更新视频
updateOnFocus	boolean	false	回到前台后实时更新视频
reconnect	boolean	false	断流后重连
reconnectInterval	boolean	0	重连间隔(ms)

init(mediaDataSource, config)

初始化播放器，得到 player 对象

参数与 flv.js 中的 createPlayer(mediaDataSource, config) 相同，该方法主要做了以下事情：

• 调用 flvjs.createPlayer() 创建播放器
• 调用 attachMediaElement() 绑定 video 标签
• 调用 load() 方法加载视频

该方法返回 player

// e.g.
const player = flv.init(
  {
    type: 'flv',
    url: 'http://192.168.0.11/stream',
    isLive: true
  },
  {
    enableStashBuffer: false // 如果您需要实时（最小延迟）来进行实时流播放，则设置为false
  }
)

update()

更新视频时间到最新

rebuild()

重建播放器，会调用 destroy() 和 init()

destroy()

销毁播放器

Player

通过调用 init() 方法产生的 flvjs.player 对象，该插件在原有基础上进行了扩展，增加了以下方法：

update()

更新视频时间到最新

rebuild()

重建播放器，会调用 destroy() 和 init()

close()

销毁播放器

onerror(event)

flvjs 的 ERROR 事件

// e.g.
player.onerror = (e) => {
  console.log('error', e)
}

onstats(event)

flvjs 的 STATISTICS_INFO 事件

onmedia(event)

flvjs 的 MEDIA_INFO 事件

其他属性/方法

flvjs.player 对象上的属性：

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
}

License