xgplayer component in vue

vue-xgplayer

xgplayer vue component.

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