0.3.1 • Published 4 years ago
vue-video-control v0.3.1
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-controlcnpm 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