videojs 销毁重新初始化

参考:https://blog.csdn.net/hadry123/article/details/102780465

dispose()从播放器中删除所有事件侦听器。删除播放器的DOM元素,所以再次初始化的时候需要我们重新创建标签

<div class="video-box">
         <video id="video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none">video>
div>
        
if (this.myPlayer) {
 	this.myPlayer.dispose();
 	$(".video-box").html('');
}
    this.$nextTick(() => {
        this.myPlayer = videojs('video', {
          //确定播放器是否具有用户可以与之交互的控件。没有控件,启动视频播放的唯一方法是使用autoplay属性或通过Player API。
          controls: true,
          //自动播放属性,muted:静音播放
          muted: true,
          autoplay: true,
          //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
          preload: "auto",
          //设置视频播放器的显示宽度(以像素为单位)
          width: "960px",
          //设置视频播放器的显示高度(以像素为单位)
          height: "522px",
          // url
          // poster: 'https://static.shuxuejia.com/img/video_image.png',
          sources: [{
            src: item.livingPath
          }],
          playbackRates: [0.5, 1, 1.5, 2] //倍速播放

        }, function onPlayerReady() {
            videojs.log('Your player is ready!'); // 比如: 播放量+1请求

            this.on('ended', function() {
            	videojs.log('Awww...over so soon?!');
            });
        });
      });

你可能感兴趣的:(videojs,vue,js视频插件,videojs,vue,js视频插件)