🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A simple, mobile-friendly video component built for vue. Work fine on IE 11+, Chrome, firefox, ipad.

Audio _Video

Documentation

GitHub issues GitHub forks GitHub stars npm

NPM

NPM

vue-video-module

A simple video component built for vue.

Work fine on IE 11+, Chrome, firefox, ipad and it's mobile friendly.

Warning

For umd users, due to webpack2 compile changes. The module export compile way changes, so you have no choice but set VueVideo = VueVideo.default at the begining.

Changelog

v0.4.6

🐛 Bug Fix

Log Page

Example

Demo Page

Test

Test Page

Usage

Install vue-video-module

npm install vue-video-module -D

Vue use

// import import Vue from 'vue'; import VueVideo from 'vue-video-module';  // require var Vue = require('Vue'); var VueVideo = require('vue-video-module');  // mount with component export default {   components: {     VueVideo,   }, };

Use in component

<div class="video-container">   <vue-video ref="video1" :options="videoOptions"></vue-video> </div>
// e.g videoOptions: {   src: 'http://vjs.zencdn.net/v/oceans.mp4',   poster: 'http://www.freemake.com/blog/wp-content/uploads/2015/06/videojs-logo.jpg',   controlBar: true,   spinner: 'circles',   fullscreen: true, },

API

Props

Below are properties you can use in videoOptions to construct your own video.

If the value is false means this part will not be rendered.

Name Description Value Default
src the source of video string (required) null
poster the poster of the video string || false false
playMain the source of main play button string || false base64
playMainRollover the source of main play button rollover state string || false base64
replayMain the source of main replay button string || false base64
replayMainRollover the source of main replay button rollover state string || false base64
playSub the source of play button in the video control bar string base64
pauseSub the source of pause button in the video control bar string base64
replaySub the source of replay button in the video control bar string base64
fullscreen if fullscreen part shown bool true
fullscreenSub the source of full screen button in the video control bar string || false base64
shrinkscreenSub the source to shrink screen to normal size, button in the video control bar string base64
autoPlay if the video auto play bool false
loop loop video bool false
muted muted video bool false
controlBar if show the controlbar bool true
spinner the loading style, check here string 'circles'
volume show the volume controller bool true
aspect define the video's width and height, an object with 'width' and 'height' property, see example4 for details object || false false
endFrame show when last frame is shown string || false false
bufferingBar show the buffering state of the video bool false
timeProgress show currentTime & totalTime when playing bool false

Events

brief:

the vueVideo is the object of this component

vueVideo.$refs.video is the dom of the video

// e.g <vue-video :options="videoOptions" ref="video" @init="initHandler"></vue-video>
Name Description Type
init(vueVideo) be called after the video is initialed. PS: if the video src is changed, this event will fire again. function
play(vueVideo) video status from pause to play function
pause(vueVideo) video status from play to pause function
start(vueVideo) video start function
end(vueVideo) video end function

Methods

brief:

the vueVideo is the object of this component

// e.g vueVideo.play();
Name Description parameter
play() make the video play null
pause() make the video pause null
replay() make the video replay null
seek(rate) 0 <= rate <= 1, jump to a ponit number
change(options) if you want to the props after you create it, use this function. object
reset() reset to original state null
loadPoster() process to load the poster null

Todo List

  • add options for manually set width and height
  • add last frame
  • add buffering state to progress bar

You May Also Like