Skip to content

geminate/vue-video-control

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

vue-video-control npm npm

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

About

A html5 video player component of vue. Include video controller / video preview / power progress bar and so on

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published