vue video 多个视频切换后视频不显示的解决方法

先说一下我这边的需求是视频需要轮播，一个人员有多个视频，左右轮播是轮播某个人员下的视频，上下切换是切换人员。

vue 代码

      <el-carousel
        indicator-position="none"
        ref="carousel"
        arrow="always"
        :interval="10000"
        @change="carouselChange"
      >
        <transition name="carousel-arrow-right">
          <button
            type="button"
            @click="arrowDown('top')"
            class="el-carousel__arrow el-carousel__arrow--right el-carousel__arrow--top"
          >
            <i class="el-icon-arrow-up">i>
          button>
        transition>
        <transition name="carousel-arrow-right">
          <button
            @click="arrowDown('bottom')"
            type="button"
            class="el-carousel__arrow--bottom"
          >
            <i class="el-icon-arrow-down">i>
          button>
        transition>
        
        <el-carousel-item
          v-for="(item, index) in videoUrl"
          :key="index"
          v-loading="loading"
          element-loading-spinner=" "
          element-loading-background="rgba(0, 0, 0, 0.8)"
          @mouseenter.native="autoplayHandler"
        >
          <template v-if="isPlayer">
            <div style="margin: 5px 0">{{ '张三' }}div>
            <div style="width: 100%; height: 76%" id="video-box">
              <video
                :id="`my-video${index}`"
                class="video-js vjs-default-skin"
                controls
                preload="auto"
              >
                <source :src="item.monitorUrl" type="application/x-mpegURL" />
              video>
            div>
          template>
        el-carousel-item>
      el-carousel>
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

js代码：

export default {
  data() {
     return {
      videoUrl: [],
      arr: [
        {
          name: "张三",
          videoUrlList: [
            {
              monitorUrl:
                "https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8",
            },
            {
              monitorUrl:
                "https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8",
            },
            {
              monitorUrl:
                "https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8",
            },
          ],
        },
        {
          name: "李四",
          videoUrlList: [
            {
              monitorUrl:
                "https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8",
            },
          ],
        },
      ],
      selectionObj:{},
      DownIndex: 0,
      player: [],
      isPlayer: true,
    };
  },
  mounted() {
    let _that = this;
        //默认取第一个
    _that.selectionObj=arr[0]
    setTimeout(() => {
      _that.getVideo();
    }, 6000);
  },
  //销毁事件
  beforeDestroy() {
    this.clearVideo();
  },
  methods: {
    //销毁视频
    clearVideo() {
      if (this.player != null) {
        for (let i = 0; i < this.player.length; i++) {
          this.player[i].dispose(); //dispose()是官方的销毁函数
        }
      }
    },
    //初始化
    getVideo() {
      const _this = this;
      //判断视频是否存在如果存在不需要重新初始化
      if(_this.player.length!=0) return
      this.videoUrl.map((item,index) => {
        let player = videojs(
          `my-video${index}`,
          {
            bigPlayButton: false,
            textTrackDisplay: false,
            posterImage: true,
            errorDisplay: false,
            controlBar: true,
            // restoreEl: true,
            autoplay: true, //是否自动播放
            muted: true, //静音模式 、、 解决首次页面加载播放
          },
          function () {
            // this.reset()//视频中重置方法 
            this.load();//刷新视频地址
            _this.player.push(player);//player是一个空数组 存放实例化的视频实例
          }
        );
      });
    },
       //监控上下切换
    arrowDown(type) {
    //点切换是销毁视频
      this.clearVideo();
      this.isPlayer = false; //切换后

      const arr= this.arr;
      const index =
        type == "top"
          ? this.DownIndex == 0
            ? this.arr.length - 1
            : this.DownIndex - 1
          : this.DownIndex == this.arr.length - 1
          ? 0
          : this.DownIndex + 1;
      this.DownIndex = index;
      this.$nextTick(() => {
        this.canteenObj = {};
      this.videoUrl = [];
        if (arr&& arr[this.DownIndex].videoUrlList) {
          this.selectionObj= canteenList[this.DownIndex];
          this.videoUrl = canteenList[this.DownIndex].videoUrlList;
          // this.loading = true;
          this.isPlayer = true; //切换后
        }
        //切换到轮播第一页
        this.$refs.carousel.setActiveItem(0);

        // videoBox.load()
        this.carouselChange(0);
        // this.getVideo(index);
      });
    },
    //监控视频切换播放
    carouselChange(index) {
    // return
      setTimeout(() => {
        this.isPlayer = true;
        this.getVideo(index);
      }, 6000);
    },
    // 轮播图鼠标移入清除时间函数
    autoplayHandler(index) {
      this.$refs.carousel.pauseTimer();
    },
  }
  
}
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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133

样式：

 
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

实现效果图：