flv简单记录

<template>
  <div>
    <div
      class="wrapper"
      v-if="monitoringBox"
      v-loading="loading"
      element-loading-text="视频加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.9)"
    >
      <video style="width: 100%" ref="videoPlayer" @loadedmetadata="hideLoading" controls></video>
    </div>
    <el-button @click="monitoring"> 视频 </el-button>
  </div>
</template>

<script>
import flvjs from 'flv.js'
export default {
  data() {
    return {
      flvPlayer: null,
      monitoringBox: true, // 监控的外层开关
      loading: true
    }
  },
  methods: {
    // 监控
    monitoring() {
      this.loading = true
      this.flvFun(src)
    },
    // 弹框关闭事件
    monitorHandleClose() {
      if (this.flvPlayer) {
        this.flvPlayer.destroy()
      }
    },
    flvFun(src) {
      if (flvjs.isSupported()) {
        let _this = this
        const videoElement = this.$refs.videoPlayer
        this.flvPlayer = flvjs.createPlayer({
          type: 'flv',
          url: src,
          isLive: true, //数据源是否为直播流 如果不设置isLive，flv.js可能会默认它不是直播流，从而采取不同的缓冲策略
          hasAudio: false, //数据源是否包含有音频
          hasVideo: true, //数据源是否包含有视频
          enableStashBuffer: true,
        //   stashInitialSize: 128 // 设置初始缓冲大小
        })
        this.flvPlayer.attachMediaElement(videoElement) //将播放器绑定到指定的媒体元素上 HTMLMeaidElement
        this.flvPlayer.load() //加载媒体资源。调用此方法后，播放器将开始缓冲媒体数据。
        // this.flvPlayer.play() // 开始播放媒体。如果媒体已经加载，则从当前位置开始播放。

        // 在发生错误时触发。可以用于捕获并处理播放过程中出现的各种错误。
        this.flvPlayer.on(flvjs.Events.ERROR, function (eventType, detail) {
          console.error('Error type:', eventType)
          console.error('Error detail:', detail)
          this.loading = false
        })

        // 在成功获取媒体信息后触发。可用于获取媒体的元数据信息。
        this.flvPlayer.on(flvjs.Events.MEDIA_INFO, function (mediaInfo) {
          console.log('Media info:', mediaInfo)
          this.loading = false
        })

        // 补帧
        // 在获取到播放统计信息时触发。可用于监控播放过程中的各项指标。
        // this.flvPlayer.on(flvjs.Events.STATISTICS_INFO, function (stats) {
        //   // console.log('Statistics:', stats)
        //   // 检查是否丢帧
        //   if (stats.droppedFrames > 0) {
        //     console.warn('检查到丢帧:', stats.droppedFrames)

        //     // 调整缓冲策略，根据丢帧情况动态调整
        //     var newBufferSize = Math.min(this.flvPlayer.buffered().end(0) * 2, 30) // 动态调整，最大不超过 30s
        //     // 动态更新播放器的缓冲区大小。
        //     this.flvPlayer.updateStashBuffer(newBufferSize)
        //   }
        // })

        // 追帧
        // 监听 STATISTICS_INFO 事件
        this.flvPlayer.on(flvjs.Events.STATISTICS_INFO, function (stats) {
          // 计算当前播放延迟
          var latency = Date.now() / 1000 - stats.currentTime

          // 如果延迟超过一定阈值，则执行追帧策略
          if (latency > 2) {
            // 假设阈值为2秒
            console.warn('High latency detected:', latency)

            // 快进到最近的关键帧，或使用倍速播放
            this.flvPlayer.currentTime = stats.currentTime + latency
            // flvPlayer.playbackRate = 1.5; // 或者使用倍速播放
          }
        })
      }
    },
    hideLoading() {
      if (this.flvPlayer) {
        this.flvPlayer.play()
      }
    }
  }
}
</script>

<style>
</style>```