videojs 销毁重新初始化问题及其他使用

1.videojs 销毁

this.myvideo = videojs('myvideo', {
                    bigPlayButton: false,
                    textTrackDisplay: false,
                    posterImage: true,
                    errorDisplay: false,
                    controlBar: true
                }, function () {
                    this.play(）
                })
myvideo.dispose()

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

var myVideoDiv = document.getElementById("myVideoDiv")
myVideoDiv.innerHTML = "<video id='myvideo' class='video-js vjs-default-skin  vjs-big-play-centered' controls preload='auto' style='width: 100%;height: 100%' controlBar='true'><source src="+ this.firstSrc +" style='width: 100%;height: 100%' type='application/x-mpegURL'></video>"

2.视频加载的两种方式

<1> html方式

<video ...>
  <source src="//path/to/video.mp4" type="video/mp4">
  <source src="//path/to/video.webm" type="video/webm">
</video>

<2> js 方式

videojs('my-player', {
  sources: [{
    src: '//path/to/video.mp4',
    type: 'video/mp4'
  }, {
    src: '//path/to/video.webm',
    type: 'video/webm'
  }]
});

或

myvideo.src({type: "video/mp4", src: "xxxxxxx"});

参考官网的sources例子
(https://docs.videojs.com/tutorial-options.html#sources)
https://docs.videojs.com/tutorial-options.html#sources

3. 常用的api有

<1> 常用操作api
pause //暂停
play //播放
dispose //清理-销毁
on //监听事件
trigger //触发事件
<2>常用事件
play //播放
pause //暂停
ended //结束
error 错误
loadeddata //数据加载完成
volume //改变播放器音量
currentTime //提供当前正在播放的当前时间（以秒为单位）。
duration //提供正在播放的视频的总持续时间
bufferedPercent //提供缓冲视频的当前百分比。
参考官网
https://docs.videojs.com/html5#
参考网址
https://videojs.com/advanced/#disneys-oceans

视频资源切换

menulistClick(index){
                this.myvideo.reset(); //重置 video
                this.myvideo.src([
                    {
                        type: 'application/x-mpegURL',
                        src: this.reVideoSrcList[index].url
                    },
                ]);
                this.myvideo.load();
                this.myvideo.play();
            }
        },