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