videojs实现监控摄像头界面及数量切换，及遇到的问题

遇到的问题：

1.页面跳转进来有时候不会自动播放

2.在切换数量的时候有的设备头不会显示

解决方案：

定位到的问题是在页面没有手动刷新时，dom用过的id再次使用的时候就不能正长播放，目前的解决方案是每次生成dom的时候取当前的时间戳作为dom的ID，这样无论是第一次进入页面还是切换数量的时候都可以保证ID是最新的也是唯一的

需求：需实现显示摄像头数量切换

代码：

 <div class="main-mid">
        <div class="hand">
            <el-radio-group @change="valChange"  v-model="radio">
              <el-radio :label="1">1</el-radio>
              <el-radio :label="2">2</el-radio>
              <el-radio :label="4">4</el-radio>
              <el-radio :label="6">6</el-radio>
            </el-radio-group>
        </div>
        <div class="video-list">
          <div v-for="item in radio" :class="`card-${radio} video-item`">
            <video :id="`video-element${item+num}`" class="video-js vjs-default-skin video-content" muted autoplay>
              <source src="" type="application/x-mpegURL" />
            </video>
          </div>
        </div>
      </div>

<script>
import 'video.js/dist/video-js.min.css';
import videojs from 'video.js';
export default {
  name: 'bigScreen',
  data() {
    return {
      video: {
        player: [],
      },
      num:0, // 避免重复ID
      radio: 1,
    }
  },
  mounted() {
    this.num = Date.now()
    this.valChange()
  },
  methods: {
    videoInit(i) {
      this.video.player[i] = videojs(`video-element${i}`);
      this.video.player[i].src({
        src: '你的播放地址',
      });
      this.video.player[i].play();
    },
    valChange(){
      this.video.player= []
      this.num+=6
      for(let i = 0; i < this.radio; i++) {
        setTimeout(()=>{
          this.videoInit(i+1+this.num)
        },100)
      }
    }
  }
}