楠啊# 2022-11-07 09:34 采纳率: 50%
浏览 76
已结题

前端播放flv处理延迟手动跳帧后一直转圈圈

flv播放处理延迟手动跳帧后一直转圈圈怎么办?

<template>
  <div class="flv_time">
    <div class="flv_title">{{title}}</div>
    <video ref="my-video" :id="'dplayer'+this.num" controls autoplay muted></video>
  </div>
</template>

<script>
import flvjs from "flv.js";
export default {
  props: ["videoUrl", "num", "title"],
  data() {
    return {
      flvPlayer: null
    };
  },
  watch: {
    // idPass: {
    //   handler(newRoom, oldRoom) {
    //     // console.log(this.idPass, "变动id的值");
    //   this.update();
    //   },
    //   deep: true
    // },
  },
  mounted() {
    setTimeout(() => {
      // console.log(this.videoUrl, "路径");
      this.startPlay();
    }, 2000);
  },
  beforeDestroy() {
    this.destoryVideo();
  },
  methods: {
    startPlay() {
      console.log(this.videoUrl, this.num, "路径");
      if (flvjs.isSupported()) {
        // ->注意:这里的定时器,在中断视频时,要清理哦
        const videoElement = document.getElementById("dplayer" + this.num);
        this.flvPlayer = flvjs.createPlayer(
          {
            type: "flv", //指定视频类型
            isLive: true, // 开启直播
            hasAudio: false, // 关闭声音
            url: this.videoUrl // 指定流链接
          },
          {
            autoCleanupSourceBuffer: true, //对SourceBuffer进行自动清理缓存
            autoCleanupMaxBackwardDuration: 120, //    当向后缓冲区持续时间超过此值(以秒为单位)时,请对SourceBuffer进行自动清理
            autoCleanupMinBackwardDuration: 60, //指示进行自动清除时为反向缓冲区保留的持续时间(以秒为单位)。
            enableStashBuffer: false, //关闭IO隐藏缓冲区
            reuseRedirectedURL: true, //重用301/302重定向url,用于随后的请求,如查找、重新连接等。
            stashInitialSize: 128
          }
        );
        this.flvPlayer.attachMediaElement(videoElement);
        // 非空判断是否执行流
        if (this.videoUrl !== "" && this.videoUrl !== null) {
          this.flvPlayer.load();
          this.flvPlayer.play();
        }
        // 视频流延迟
        setInterval(() => {
          if (this.flvPlayer.buffered.length) {
            let end = this.flvPlayer.buffered.end(0); //获取当前buffered值
            let diff = end - this.flvPlayer.currentTime; //获取buffered与currentTime的差值
            if (diff >= 0.5) {
              //如果差值大于等于0.5 手动跳帧 这里可根据自身需求来定
              this.flvPlayer.currentTime = this.flvPlayer.buffered.end(0); //手动跳帧
            }
          }
        }, 2000);
        // 断流重连
        this.flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => {
          // alert("网络波动,正在尝试连接中...");
          console.log("网络波动,正在尝试连接中...", this.flvPlayer, "视频状态");
          if (this.flvPlayer) {
            this.reloadVideo(this.flvPlayer);
          }
          // 断流销毁掉视频  方案2
          // if (errType == "NetworkError") {
          //   console.log('销毁掉视频');
          //   this.destoryVideo();
          // }
          // errType是 NetworkError时,对应errDetail有:Exception、HttpStatusCodeInvalid、ConnectingTimeout、EarlyEof、UnrecoverableEarlyEof
          // errType是 MediaError时,对应errDetail是MediaMSEError   或MEDIA_SOURCE_ENDED
        });
        // 画面卡死
        this.flvPlayer.on("statistics_info", function(res) {
          // console.log(res, "画面卡死了");
          let lastDecodedFrame = 0;
          if (lastDecodedFrame == 0) {
            lastDecodedFrame = res.decodedFrames;
            return;
          }
          if (lastDecodedFrame != res.decodedFrames) {
            lastDecodedFrame = res.decodedFrames;
          } else {
            lastDecodedFrame = 0;
            if (this.flvPlayer) {
              this.reloadVideo(this.flvPlayer);
            }
          }
        });
      } else {
        console.log("flvjs不支持");
      }
    },

    // 执行销毁 后在创建
    reloadVideo(flvPlayer) {
      this.destoryVideo(flvPlayer);
      this.startPlay();
    },
    destoryVideo(flvPlayer) {
      this.flvPlayer.pause();
      this.flvPlayer.unload();
      this.flvPlayer.detachMediaElement();
      this.flvPlayer.destroy();
      this.flvPlayer = null;
    }
  }
};
</script>

<style lang="less" scoped>
.flv_time {
  width: 100%;
  height: 100%;
  position: relative;
  .flv_title {
    width: 100%;
    height: 28px;
    font-family: "PingFang SC";
    font-size: 14px;
    line-height: 28px;
    position: absolute;
    top: 0;
    text-indent: 35px;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.4);
  }
  video {
    width: 100%;
    height: 100%;
  }
}
</style>


  • 写回答

1条回答 默认 最新

  • 楠啊# 2022-11-07 09:42
    关注

    // 视频流延迟
    setInterval(() => {
    if (this.flvPlayer.buffered.length) {
    let end = this.flvPlayer.buffered.end(0); //获取当前buffered值
    let diff = end - this.flvPlayer.currentTime; //获取buffered与currentTime的差值
    if (diff >= 0.5) {
    //如果差值大于等于0.5 手动跳帧 这里可根据自身需求来定
    this.flvPlayer.currentTime = this.flvPlayer.buffered.end(0); //手动跳帧
    }
    }
    }, 2000);

    img

    添加这段处理延迟代码手动跳帧就会转圈圈

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 11月15日
  • 已采纳回答 11月7日
  • 创建了问题 11月7日

悬赏问题

  • ¥15 unity脚本挂不上
  • ¥15 数学建模数学建模需要
  • ¥20 Java Sound Api 调用Mixer.getLine偶现Line unsupported错误。
  • ¥15 使用cuda加速opencv运算但是报错AttributeError: module 'cv2.cuda' has no attribute 'getCudaEnabledDeviceCount'
  • ¥15 java输入输出异常
  • ¥15 三子连珠对弈小游戏制作
  • ¥15 C++扑克牌游戏的编程
  • ¥15 有人能看一下我宿舍管理系统的报修功能该怎么改啊?链表那里总是越界
  • ¥15 cs loadimage运行不了,easyx也下了,没有用
  • ¥15 r包runway详细安装教程