npm:@xysfe/memento-player

README

memento-player

Installation

npm i @xysfe/memento-player -S

Props

events

Type: Array
Required: true
Default: []

视频数据的数组

<memento-player :events="events"/>

mode

Type: String
Required: false
Default: player

播放器的模式，player（播放模式），page（页面模式），record（录制模式）

<memento-player mode="player"/>

width/height

Type: Number
Required: false
Default: 1024/576

播放器的宽高

<memento-player :width="1024" :height="576"/>

totalTime

Type: Number
Required: false

视频的总时长

<memento-player :totalTime="180000"/>

function

addEvent

添加单个event

const event = {}
this.$refs.player.addEvent(event)

addEvents

添加events数组

const events = []
this.$refs.player.addEvents(events)

addEventListener

添加监听事件

// fullsnapshot-rebuilded, pause, resume, finish, skip-start, skip-end
this.$refs.player.addEventListener('pause', ()=> {
  // do something
})

Example

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

Usage no npm install needed!