[前端] Vue视频组件

一、vue-video-player

1.安装

cnpm install vue-video-player -S
cnpm install 'video.js' -S

2.导入使用

在main.js中导入：

import VueVideoPlayer from 'vue-video-player';
import 'video.js/dist/video-js.css';

Vue.use(VueVideoPlayer);

使用video组件：（完整代码）

3.支持的控制函数、回调函数

控制函数：

this.$refs.videoPlayer.player.play() // 播放
this.$refs.videoPlayer.player.pause() // 暂停
this.$refs.videoPlayer.player.src(src) // 重置进度条

事件函数：

 @play="onPlayerPlay($event)"
 @pause="onPlayerPause($event)"
 @ended="onPlayerEnded($event)"
 @waiting="onPlayerWaiting($event)"
 @playing="onPlayerPlaying($event)"
 @loadeddata="onPlayerLoadeddata($event)"
 @timeupdate="onPlayerTimeupdate($event)"
 @canplay="onPlayerCanplay($event)"
 @canplaythrough="onPlayerCanplaythrough($event)"
 @statechanged="playerStateChanged($event)"
 @ready="playerReadied"

参照：https://www.jb51.net/article/173816.htm

4.实现效果

 二、vue-dplayer

1.安装

cnpm install vue-dplayer -S

2.导入使用

在main.js中导入：

import VueDPlayer from 'vue-dplayer';
import 'vue-dplayer/dist/vue-dplayer.css';

Vue.use(VueDPlayer);

使用vue-dplayer组件：

以上是最基本的使用代码。

3.options参数

参考dplayer的官方文档：http://dplayer.js.org/guide.html#options。参照options章节，填写参数进行自定义播放器。

4.API函数及事件绑定

API函数参考：http://dplayer.js.org/guide.html#api

事件绑定参考：http://dplayer.js.org/guide.html#event-binding

三、自己封装一个播放器

参考：[前端] vue封装自定义播放器

 

≥Ö‿Ö≤