1 安装插件
npm install xgplayer --save
2.所在页面写入
<div click="onClick">点击播放</div>
<div style="height: 500px;width:800px">
<div id="videoPlay"/>
</div>
import XGPlayer from 'xgplayer'
import 'xgplayer/dist/index.min.css'
data() {
return {
player: null,
}
}
initPlayer() {
if (!this.player) {
this.player = new XGPlayer({
id: 'videoPlay',
url: this.fileUrl, // 视频地址
width: '100%',
height: '100%',
playbackRates: [0.7, 1.0, 1.5, 2.0],
defaultPlaybackRate: 1.0,
aspectRatio: '16:9',
live: false,
controls: true,
autoplay: false
})
}
},
onClick() {
this.$nextTick(() => {
this.initPlayer()
})
}
--------------如果在弹框上播放-----------------
<el-dialog
title="查看视频"
:close-on-click-modal="false"
:visible.sync="show"
width="800px"
@open="afterDialogOpen"
@closed="player=null"
>
<div style="height: 500px;width:800px"><div id="videoPlay"/></div>
</el-dialog>
afterDialogOpen() {
this.$nextTick(() => {
this.initPlayer()
})
},