flv播放问题总结

标题

1.使用webscorket做自动提示音
audio标签可以直接使用autoplay这个属性直接让音频自动播放，但是谷歌浏览器已经做过有人就想处理，只有发生用户行为比如点击按钮才能让音频播放，这为了避免用户的流量流失，产生噪音。这时候有人就想可以使用模拟点击事件但是这时在浏览器中又会看到报错，如下图：



发现有时可以播放有时不可以，按钮无效，还是报错；
还是要设置浏览器的东西：https://jingyan.baidu.com/article/9f7e7ec09f06962e29155438.html
设置播放的链接代码就可以正常运行不报错啦，

2.flv直播流无法访问会一直拉流，页面一直放着疯狂报错；

1. 视频流延迟 2. 断流重连 3.画面卡死

<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,
      lastDecodedFrame:0,
    };
  },
  watch: {

  },
  mounted() {

  },
  beforeDestroy() {
    this.destoryVideo();
  },
  methods: {
    startPlay() {
      //   console.log(this.videoUrl, "路径");
      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) return;
          if (this.flvPlayer.buffered.length) {
            let end = this.flvPlayer.buffered.end(0); //获取当前buffered值
            let diff = end - this.flvPlayer.currentTime; //获取buffered与currentTime的差值
            if (diff >= 4) {
              console.log("处理延迟");
              //如果差值大于等于4 手动跳帧 这里可根据自身需求来定
              this.flvPlayer.currentTime = this.flvPlayer.buffered.end(0) - 1.5; //手动跳帧
            }
          }
        }, 2000); //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) {
       if (this.lastDecodedFrame == 0) {
         this.lastDecodedFrame = res.decodedFrames;
         return;
       }
       if (this.lastDecodedFrame != res.decodedFrames) {
         this.lastDecodedFrame = res.decodedFrames;
       } else {
           this.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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118

flv直播是要断线重连的 if (errType == “NetworkError”) {
console.log(‘销毁掉视频’);
this.destoryVideo();
}
但是因为此项目是电视台的需要一直挂着页面，断流很久就会，一直拉流就会疯狂报错，虽然不影响但浏览器会承受不住，最后挂掉，此处我做了拉流销毁处理，如果有好的方案，请指正，