@xysfe/memento-player/README.md

memento's replayer UI

## memento-player


### Installation
```html
npm i @xysfe/memento-player -S
```

### Props
#### events
Type: `Array`<br>
Required: `true`<br>
Default: `[]`

视频数据的数组
```html
<memento-player :events="events"/>
```
#### mode
Type: `String`<br>
Required: `false`<br>
Default: `player`

播放器的模式，player（播放模式），page（页面模式），record（录制模式）
```html
<memento-player mode="player"/>
```
#### width/height
Type: `Number`<br>
Required: `false`<br>
Default: `1024/576`

播放器的宽高
```html
<memento-player :width="1024" :height="576"/>
```

#### totalTime
Type: `Number`<br>
Required: `false`<br>

视频的总时长
```html
<memento-player :totalTime="180000"/>
```

### function
#### addEvent
添加单个event
```js
const event = {}
this.$refs.player.addEvent(event)
```
#### addEvents
添加events数组
```js
const events = []
this.$refs.player.addEvents(events)
```
#### addEventListener
添加监听事件
```js
// fullsnapshot-rebuilded, pause, resume, finish, skip-start, skip-end
this.$refs.player.addEventListener('pause', ()=> {
  // do something
})
```

### Example
```html
<template>
  <div id="app">
    <memento-player
      ref="player"
      mode="player"
      :events="events"
      @customEventClick="handleCustomEventClick" />
  </div>
</template>

<script>
import Vue from 'vue'
import mementoPlayer from '@xysfe/memento-player'

Vue.use(mementoPlayer)

export default {
  name: 'App',
  components: {
    mementoPlayer
  },
  data () {
    return {
      mode: 'player', // player or page 播放器模式 或者 是页面模式
      events: [],
    }
  },
  mounted () {
    this.getEvents()
  },
  methods: {
    getEvents () {
      this.events = events
    },
    addEvents () {
      const event = {
         'type': 4,
         'data': {
           // ....
         },
         'timestamp': 1544756766750,
         'sessionId': '8dda0c07-b950-47ec-a5ea-3d25746042bf'
      }       
      // 添加分页数据   
      this.$refs.player.addEvents([event])
    },
    handleCustomEventClick (e) {
      window.open(`test?id=${e.sessionId}`)
    }
  }
}
</script>

```