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

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

  • 引入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官网

然后就:

结束啦~~~

Logo

前往低代码交流专区

更多推荐