1.在项目根目录main.js 引入vue-video-player
import VideoPlayer from 'vue-video-player'
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'
2.在页面中直接引入
<el-form-item label="视频">
<div class='demo'>
<video-player class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
@pause="pausePlay($event)"
:options="playerOptions">
</video-player>
</div>
</el-form-item>
playerOptions: {
playbackRates: [0.5, 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: ''
}],
poster: '',
notSupportedMessage: '此视频暂无法播放,请稍后再试',
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true
},
}
pausePlay(player) {
this.player.pause();
},
handleEdit: function (index, row) {
this.editFormVisible = true;
this.editForm = Object.assign({}, row);
if (this.$refs.videoPlayer === undefined) {
this.playerOptions.sources[0]={
type: "video/mp4",
src: row.video
}
}else {
let palyer = this.$refs.videoPlayer.player;
palyer.src(row.video);
}
}
{
player() {
return this.$refs.videoPlayer.player
}
}
3.成品截图gif
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/32b815b07a54bd11747eb03354c061ae.gif#pic_center)