videojs动态切换路径

整体功能实现点击可切换预览m3u8格式视频

1、先写个按钮放点击事件

<span
      class="content-url"
      @click="reviewVideo(scope.row)">
      预览
</span>
             

2、用一个弹窗包含video标签

<!-- 播放视频 -->
      <el-dialog
        title="播放视频"
        :visible.sync="videoVisible"
        width="40%"
        @close="videoClose"
      >
        <video
          id="example_video1"
          class="video-js vjs-default-skin vjs-big-play-centered"
          controls
          preload="auto"
          width="400px"
          ref="vidRef"
        >
          <source :src="videoUrl" type="application/x-mpegURL" ref="video" />
        </video>
      </el-dialog>

3、剩下就是点击事件的操作了
这里主要使用dispose来解决id老是重复的警告

reviewVideo(obj) {
        this.videoVisible = true;
        this.videoUrl = obj.contentUrl;
        this.$nextTick(() => {
          this.getVideo();
        });
    },
    getVideo() {
      if (this.player) {
        this.player.src({ src: this.videoUrl, type: "application/x-mpegURL" });
        this.player.load();
      } else {
        this.player = videojs("example_video1", {
          bigPlayButton: true,
          textTrackDisplay: false,
          posterImage: true,
          errorDisplay: false,
          controlBar: true,
        });
      }
    },
    videoClose() {
      this.player.dispose()
      this.videoVisible = false;
    },