vue-video-control

A html5 video player component of vue.

Include video controller / video preview / power progress bar / danmaku and so on

Install

You can install vue-video-control by npm.

$ npm install vue-video-control

cnpm mirror is recommended if you are in Mainland China.

Getting Started

• Import vue-video-control at main.js

import VideoControl from 'vue-video-control'

Vue.use(VideoControl)

• Set options at pages

<template>
  <video-control ref="videoControl" class="video-control" :options="videoOptions"></video-control>
</template>

<script>
  export default {
    data () {
      return {
        videoOptions: {
          src: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
        }
      }
    }
  }
</script>

Options

| options | type | default | instruction | -------- | ----- | ----- | ----- | src | string | '' | Indicates media URL | autoplay | boolean | false | Do auto play the video | poster | string | '' | The poster image url of video | control.show | boolean | true | Display control bar | control.focusPreview.show | boolean | false | Display focus preview bar | control.focusPreview.data | array | [1] | The data array of focus preview bar | control.videoPreview.show | boolean | false | Display video preview image | control.videoPreview.imgUrl | string | '' | The image url of video preview.The image must be an single line sprite image and each of the part should be 160*90. See /public/video-preview.jpg | control.videoPreview.totalNum | number | 10 | Number of the sprite image | control.videoTimer.show | boolean | true | Display video <current time / duration> timer | control.speedBtn.show | boolean | true | Display the button to change playback speed | control.speedBtn.speedArray | array | [0.5, 0.75, 1, 1.5, 2] | Playback speed options | control.volumeBtn.show | boolean | true | Display the button to change volume | control.fullScreenBtn.show | boolean | true | Display the button to toggle full screen | danmaku.show | boolean | true | Display the danmaku and danmaku control | danmaku.fontSize | number | 25 | The font size of danmaku | danmaku.rowNum | number | 5 | The maximum number of lines of danmaku | danmaku.speed | number | 80 | Rolling speed of danmaku | danmaku.data | array | [] | Danmaku data array | danmaku.onSendDanmaku | Function | | Triggered after the danmaku is sent

Methods

.refreshOptions()

this.videoOptions.control.focusPreview.data = await getData()
this.videoOptions.control.focusPreview.show = true
this.$refs.videoControl.refreshOptions()

Refresh the component options

Events

play / pause / loadStart / canPlay / canplaythrough / waiting / playing / progress / durationChange / seeking / seeked / timeUpdate / ended / error / rateChange / volumeChange

See Media events