vue项目里面使用video.js视频播放插件

项目里面需要实现一个视频播放列表

如上图所示的列表~~~过程如下：

• 引入video.js文件

npm install -S video.js

在main.js里面引入相关文件，并挂载在window对象上

import videojs from 'video.js';
import "video.js/dist/video-js.min.css";
window.videojs = videojs;

• 在页面使用播放器

html

<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup="{}"  :poster="video_over_img" webkit-playsinline="true" playsinline="true">
	<source :src="lesson_detail.url" type="video/mp4">        
</video>

初始化

let that = this;
 this.$nextTick(() => {
   that.player = videojs('example_video_1');
	
   that.player.on("ended",function(){
   	//视频结束的操作
     that.option();
   })  
 })

• 切换不同的视频文件

ps: 点击不同的按钮实现播放不同的视频。

//url为不同的视频链接，在切换视频的时候调用
this.player.src(url); 
this.player.poster(image);
this.player.load(); 

常用事件:

ps:用上文中初始化的视频播放对象来说明

• this.player.play(); ---- 播放
• this.player.pause(); ---- 暂停
• this.player.dispose(); ---- 销毁
• this.player.on(‘click‘, fn) ;---- 监听
  ended：视频播放结束
  pause：点击暂停
  play：点击播放
  volumechange：声音改变
  timeupdate：视频播放中
  seeked：视频跳转结束
  seeking：视频跳转中
• this.player.trigger(‘dispose‘); ---- 触发事件

常用选项

• autoplay: true/false 播放器准备好之后，是否自动播放 【默认false】
• controlBar: true/false 是否拥有控制条 【默认true】,如果设为false ,那么只能通过api进行控制了。也就是说界面上不会出现任何控制按钮.
• loop: true/false 视频播放结束后，是否循环播放
• muted : true/false 是否静音
• poster: 播放前显示的视频画面，播放开始之后自动移除。通常传入一个URL
• preload:预加载（‘auto‘：自动/’metadata‘ 元数据信息 ，比如视频长度，尺寸等/‘none‘ 不预加载任何数据，直到用户开始播放才开始下载）

附上：
video.js官网

然后就：

结束啦~~~