xgplayer-vue

<img src="https://raw.githubusercontent.com/bytedance/xgplayer/master/xgplayer.png" width="384" height="96">

<a href="https://www.npmjs.com/package/xgplayer-vue" target="_blank">
    <img src="https://img.shields.io/npm/v/xgplayer-vue.svg" alt="npm">
</a>
<a href="https://www.npmjs.com/package/xgplayer-vue" target="_blank">
    <img src="https://img.shields.io/npm/l/xgplayer-vue.svg" alt="license">
</a>
<a href="http://commitizen.github.io/cz-cli/">
    <img src="https://img.shields.io/badge/commitizen-friendly-brightgreen.svg" alt="commitizen">
</a>

Introduction

Start

1. Install

```
$ npm install xgplayer-vue@latest
```

1. Usage

Step 1. Add xgplayer-vue component
```js
import Xgplayer from 'xgplayer-vue';
export default {
  components:{
    Xgplayer
  }
}
```

Step 2. Use in template
```html
<Xgplayer :config="config" @player="Player = $event"/>
```

Step 3. Config for xgplayer
```js
export default {
  data () {
    return {
      config: {
        id: 'vs',
        url: '/xgplayer-demo.mp4'
      },
      Player: null
    }
  }
}
```
You can use 'config' object to pre-config xgplayer, such as size, volume, autoplay and so on. [More config](http://h5player.bytedance.com/en/config/)

'mp4', 'hls', 'flv', 'dash' are supported to play and you should add the plugin you want to use. [Functional Plugins List](http://h5player.bytedance.com/en/plugins/#functional-plugins-list).

'Player' is the xgplayer instance which exposed from the component. You can use 'Player' to access the API of xgplayer as follows.

API

Attributes

console.log(this.Player.currentTime)

Method

this.Player.pause();

Event

this.Player.on('play', ()=>{console.log('play')})

Life Cycle

this.Player.once('ready', ()=>{console.log('ready')})

Plugins

import Xgplayer from 'xgplayer-vue';
import 'xgplayer-custom';

Demo

$ git clone git@github.com:bytedance/xgplayer-vue.git
$ cd xgplayer-vue
$ npm install
$ npm start

License