Skip to content
xgplayer component in vue
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
docs
examples
src
.editorconfig
.eslintrc.js
.gitignore
.postcssrc.js
CHANGELOG.md
LICENSE
README.md
babel.config.js
package-lock.json
package.json
vue.config.js

README.md

vue-xgplayer

npm (tag) vue2 dependencies

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

Related Projects

License

MIT

You can’t perform that action at this time.