vue-video-control
v0.3.1
Published
A html5 video player component of vue. Include video controller / video preview / power progress bar / danmaku and so on
Downloads
16
Readme
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