解决 VIDEOJS: WARN: Player “videoPlayer“ is already initialised. Options will not be applied.

vue+elementui+video.js时播放M3U8格式视频，首次渲染可正常播放，切换下一个视频后报错并黑屏。

原因在于video的ID值重复导致冲突，替换成不同的ID值即可。

  <el-dialog title="免费试看" :visible.sync="dialogVisible" ref="videoDialog" :before-close="closeDialog" width="null"
      custom-class="_this-video">
      <div class="container">
        <video :id="'video' + courseId" ref="video" :src="nowPlayVideoUrl" class="video-js vjs-default-skin" muted
          style="width:100%"></video>

      </div>
    </el-dialog>

VIDEO传递不同的ID值过去。

    initVideo() {
      let _this = this;
      // 这些options属性也可直接设置在video标签上，见 muted
      let options = {
        autoplay: true, // 设置自动播放
        controls: true, // 显示播放的控件
        sources: [
          {
            src: _this.nowPlayVideoUrl,
            type: "application/x-mpegURL"
          }
        ]
      };
      let player = Videojs("video" + this.courseId, options, function onPlayerReady() {
        console.log("onPlayerReady 中的this指的是:", this); // 这里的this是指Player,是由Videojs创建出来的实例
        console.log(player === this); // 这里返回的是true
      });

    },

 player接收不同的VIDEO的ID值即可。