vue-xgplayer

xgplayer vue component.

View demo Download Source

Installation

npm i vue-xgplayer -S

Usage

// main.js
import Vue from 'vue'
import VueXgplayer from 'vue-xgplayer'

Vue.use(VueXgplayer, {
  // globalOptions
  enterLogo: {
    url: '/images/video-player-loading.png',
    width: 100,
    height: 40
  },
  playsinline: true
})

// YourComponent.vue
<template>
  <xgplayer :options="playerOptions"></xgplayer>
</template>

<script>
export default {
  data () {
    return {
      playerOptions: {
        url: 'https://h5player.bytedance.com/video/mp4/xgplayer-demo-360p.mp4',
        width: '100%' // Depends on its wrapper element.
      }
    }
  }
}
</script>

Examples

https://github.com/savokiss/vue-xgplayer/blob/master/examples/App.vue

Props

Prop Type Default Info
id String xgplayer_${random()} Optional. The dom id
options Object {} The url property is required.
aspect String '16by9' Optional. Aspect ratio for auto resize video height.
noDestroy Boolean false Optional. Wont destroy player when component destroy

Methods

Method Info
reload Will call player.reload()
destroy Will call player.destroy()

GitHub