https://github.com/geminate/vue-video-control
A html5 video player component of vue. Include video controller / video preview / power progress bar and so on
https://github.com/geminate/vue-video-control
power-progress-bar video-player vue
Last synced: about 1 year ago
JSON representation
A html5 video player component of vue. Include video controller / video preview / power progress bar and so on
- Host: GitHub
- URL: https://github.com/geminate/vue-video-control
- Owner: geminate
- Created: 2020-06-23T08:51:48.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T09:45:46.000Z (over 3 years ago)
- Last Synced: 2025-03-12T19:40:06.650Z (over 1 year ago)
- Topics: power-progress-bar, video-player, vue
- Language: Vue
- Homepage:
- Size: 6.18 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
vue-video-control [](https://www.npmjs.com/package/vue-video-control) [](https://www.npmjs.com/package/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.
```javascript
$ npm install vue-video-control
```
[cnpm](https://github.com/cnpm/cnpm) mirror is recommended if you are in Mainland China.
## Getting Started
* Import vue-video-control at main.js
```js
import VideoControl from 'vue-video-control'
Vue.use(VideoControl)
```
* Set options at pages
```vue
export default {
data () {
return {
videoOptions: {
src: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
}
}
}
}
```
## 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 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()
```js
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](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events)