使用XGPlayer播放视频

最新推荐文章于 2024-08-26 00:01:54 发布

怡呀呀

最新推荐文章于 2024-08-26 00:01:54 发布

阅读量121

点赞数 1

文章标签：音视频 vue.js 前端

本文链接：https://blog.csdn.net/cnfabu/article/details/141323682

版权

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()
   })
},