1.首先,下载安装vue-video-player
npm install vue-video-player --save
2.在入口文件main.js引入(多页则放入相应的入口文件)
import VideoPlayer from 'vue-video-player'
3.在需要使用的页面引入
<video-player ref="videoPlayer" class="video-player vjs-custom-skin" :playsinline="true" :options="playerOptions"
@play="onPlayerPlay($event)" @pause="onPlayerPause($event)" />
4.在相应的data中配置
data() {
return {
playerOptions: {
playbackRates: [0.7, 1.0, 1.5, 2.0],
autoplay: false,
muted: false,
loop: false,
preload: 'auto',
language: 'zh-CN',
aspectRatio: '16:9',
fluid: true,
sources: [{
type: 'video/mp4',
src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm'
}],
hls: true,
poster: 'http://pic33.nipic.com/20131007/13639685_123501617185_2.jpg',
width: document.documentElement.clientWidth,
notSupportedMessage: '此视频暂无法播放,请稍后再试',
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
progressControl: true,
fullscreenToggle: true
}
},
}
},
5.如果在refs上挂载视频组件,就可以添加自定义按钮了,看情况使用
computed: {
player() {
return this.$refs.videoPlayer.player
}
},
6.如果要更改样式,可以在根目录新建一个style目录和样式文件,单独引入
require('../styles/video/video.css')