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