VIDEOJS: 警告: プレーヤー「videoPlayer」はすでに初期化されています。オプションは適用されません。

vue+elementui+video.js を再生すると M3U8 形式の動画が再生されますが、最初のレンダリングは正常に再生できますが、次の動画に切り替えるとエラーが報告され画面が真っ暗になります。

その理由は、ビデオの 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
      });

    },

 プレーヤーは、異なる VIDEO の ID 値を受け取るだけで済みます。