今天继续给小伙伴们分享一个西瓜视频播放器Vue组件XGPlayer-Vue。

xgplayer-vue 西瓜视频播放器xgplayer的vue.js版本组件。

安装

$ npm i xgplayer-vue@latest -S

使用插件

<template>
  <div class="player-wrap">
    <Xgplayer :config="config" @player="Player = $event" />
  </div>
<template>

<script>
import Xgplayer from 'xgplayer-vue';
export default {
  data () {
    return {
      config: {
        id: 'vs',
        url: '/xgplayer-demo.mp4'
      },
      Player: null
    }
  },
  components: {
    Xgplayer
  },
}
</script>

// 当前播放时间
console.log(this.Player.currentTime)

// 方法
this.Player.play();
this.Player.pause();
this.Player.reload();

// 播放事件
this.Player.on('play', ()=>{console.log('play')})

更多的诸如尺寸、音量及自动播放等配置可去查看详细配置参数。

https://v2.h5player.bytedance.com/en/config/

另外还支持mp4、hls、flv、dash等播放流。

ending 附上文档及项目地址链接。

# 文档地址
https://v2.h5player.bytedance.com/

# 仓库地址
https://github.com/bytedance/xgplayer-vue

ok，基于Vue的xgplayer视频播放器就介绍到这里。希望对大家有所帮助！