videojs(生命周期，自定义控制台，常用API)

Videojs

初始化video对象

<video :id="id" class="video-js vjs-default-skin" data-setup>video>

this.player = videojs(this.id,{
	autoplay : true,//播放器准备好之后，是否自动播放，默认false
	controls : false//是否拥有控制条 ，默认true,如果设为false ,界面上不会出现任何控制按钮，那么只能通过api进行控制了
	//我设置的是false然后通过API和自定义控制台联动
	//height: 字符串或数字（字符串带单位）视频容器的高度，比如： height:300 or height:'300px'
	//width: 字符串或数字,视频容器的宽度, 单位像素
	//loop : true/false,视频播放结束后，是否循环播放
	muted : true //是否静音
	//poster: 通常传入一个URL//播放前显示的视频画面，播放开始之后自动移除。
	//preload: 'auto'/ 'metadata' / 'none',预加载,auto-自动,metadata-元数据信息 ，比如视频长度，尺寸等,none-不预加载任何数据，直到用户开始播放才开始下载
	//notSupportedMessage: '此视频暂无法播放，检查相机状态是否正常或请查看是否安装flash',//无法播放时显示的信息
})	
this.player.src({
  src: url,
})

关于muted属性有必要说一下，在使用了autoplay，muted为false时，浏览器会报错：
【错误内容】DOM Exception: play() failed because the user didn’t interact with the document first.
原因是：Chrome 66为了避免标签产生随机噪音而报错。
解决方法：设置muted为true静音，或者通过this.player.on监听loadeddata，在回调函数中设置muted为false(但是我试的时候有时候成功有时候不起作用)

常用API和事件

this.player.pause() //暂停
this.player.play() //播放
this.player.dispose() //清理-销毁
this.player.on() //监听事件
this.player.trigger() //触发事件

事件

this.player.duration() //视频的时长
this.player.cureentTIme() //当前播放的时长，如果需要同步进度条变化的时常可在括号中写上进度条的时长即可改变
this.player.playbackRate() //获取视频播放的速率，如需要设置可在括号中写入播放速率
this.player.volume() //视频的音量大小
this.player.requestFullscreen() //设置显示全屏，手动设置全屏图标时提醒您要记得阻止事件冒泡哦
this.player.cancelFullScreen()//取消全屏
this.player.pause() //暂停
this.player.pause() //暂停

生命周期

this.on('loadstart',function () {
  console.log('loadstart------------')
});
this.on('loadedmetadata',function () {
  console.log('loadedmetadata---视频源数据加载完成----')
});
this.on('loadeddata',function () {
  console.log('loadeddata---渲染播放画面----');//autoPlay必须为false
});
this.on('progress',function () {
  console.log('progress-------加载过程----')
});
this.on('timeupdate',function () {
//视频时间改变时调用
  const curTime = this.currentTime();
// console.log('timeupdate-------------',curTime);
})
this.off('play',function () {
  console.log('播放时调用')
})
this.off('pause',function () {
  console.log('暂停时调用')
})
this.off(this.player,'ended',function () {
  this.play()//这个this指向this.player
  console.log('播放完毕调用')
})