V-plr NPM | npm.io

v-plr

Introduction

A easy-to-use vue video plugin

Preview

Install

Using npm:

$ npm install v-plr
Using yarn:
$ yarn add v-plr

Quick Start

<template>
  <v-video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" title="default controllers">
  <v-video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" 
    @onPlay="onPlay" @onPause="onPause" @onTimeupdate="onTimeupdate">
    <!--  add custom controllers here to cover default controllers -->
  </v-video>
</template>

<script>
import VVideo from 'v-plr'
Vue.use(VVideo)
export default {
  //...
  methods:{
    onPlay(){},
    onPause(){},
    onTimeupdate({ duration, currentTime, buffered }){}
  }
}
</script>

Use Component

Slider

<template>
  <v-slider v-model="curVal" width="400px" />
</template>

<script>
import { VSlider } from 'v-plr'
export default {
  //...
  data() {
    return { curVal: 50 }
  },
  components: { VSlider },
  methods: {}
}
</script>

Documentation

VVideo

Props

Props	Description	Type	Default	Required
src	The url of video.	String	''	true
ratio	The ratio of the video's width and height.	Number	16 / 9	false
title	The title of the default controllers.	String	''	false

Events

Events	Description	Params
onLoadstart	Fires when media start to load.	None
onLoadedmetadata	Fires when media meta data is loaded.	None
onPlay	Fires when media play after last pause.	None
onPause	Fires when media pause	None
onPlaying	Fires when media start to play	None
onTimeupdate	Fires when media currentTime changed	{ duration, currentTime, buffered }
onWaiting	Fires when media is waiting for another opeation	None
onEnded	Fires when media is ended	None
onError	Fires when a error happen	None
onFullscreenChange	Fires when the fullscreen status changed	{ isFullscreen }

VSlider

Props

Props	Description	Type	Default	Required
min	The minimun value of slider.	Number	0	false
max	The maximum value of slider.	Number	100	false
value	The current value of slider.	Number	50	false
height	The height of slider block.	Number/String	40(px)	false
width	The width of slider block.	Number/String	100%	false
buffered	The value of slider buffered.	Number	0(min~max)	false
seekColor	The background color of dragging block.	String	#eeeeee	false
playedColor	The background color of the area between min and current value.	String	#ffe411	false
bufferedColor	The background color of the area between min and buffered value.	String	#cfcfcf	false
progerssHeight	The height of the slider display block.	Number	3(px)	false
btnBorderWidth	The border width of the slider button	Number	2(px)	false
btnBorderColor	The border color of the slider button	String	grey	false