vue+video.js播放.m3u8地址视频

使用的包

"video.js": "^7.6.6",
"videojs-contrib-hls": "^5.15.0",

案例

.vue部分

		<video
          id="my-video"
          class="video-js vjs-default-skin vjs-big-play-centered"
          width="600"
          height="500"
          controls
          muted
          preload="auto"
          autoplay
        >
          <source :src="liveUrl" type="application/x-mpegURL" />
        </video>

.js部分

变量说明：
：src中使用了变量“liveUrl”，需要自己提前赋值，这里不贴了
videojsObj;预设为null

		if (that.videojsObj === null) {//如果对象为空，则生成video.js对象
          that.$nextTick(() => {
            that.videojsObj = videojs("my-video",
              function () {
                this.load(that.liveUrl);//加载播放地址
                this.play();//开始播放
              });
          })
        } else {//对象已存在时，直接重新加载视频流地址
          that.videojsObj.pause();//暂停播放
          that.videojsObj.src(that.liveUrl);//设置新的直播流
          that.videojsObj.load(that.liveUrl);//重新加载
          that.videojsObj.play();//开始播放
        }

注意

离开页面时，把对象释放掉，不然后台会一直请求.ts片段

this.videojsObj.dispose();