Performant HTML5 Video Player Component For Vue.js - vuePlayer

Install & Download:

# NPM
$ npm install @algoz098/vue-player --save

Description:

A customizable and high-performance HTML5 video player for Vue.js based app.

Features:

Delay the loading/playing until you click the thumbnail.
Allows the visitor to preview the video on hover.
Custom player controls.

How to use it:

Import the component.

import vuePlayer from '@algz098/vue-player'

Vue.component(vuePlayer)
// or
export default {
  components: {
    vuePlayer
  }
}

Insert the component into your template. That’s it.

<vue-player 
  src="sample.mp4" 
  poster="poster.jpg" 
  title="this is a title" 
  v-model="playing">
</vue-player>

All default props to customize the HTML5 video player.

/**
   * Set title.
   * It appears on the overlay
   * @model
   */
title: {
  type: String,
  default: null
},
/**
   * Set play/pause.
   * It automatically set the video the right state
   * @model
   */
value: {
  type: Boolean,
  default: undefined
},
/**
   * Define the source for the video tag. 
 * if array uses the src-index to pick one
   */
src: {
  required: true,
  type: [String, Array]
},
/**
   * Use ONLY if src is a array
 * set the index of the src
   */
srcIndex: [String, Number],
/**
   * set the video to autoplay as it's loaded
   */
autoplay: {
  type: Boolean,
  default: false
},
/**
   * show video preview if mouse hover
   */
previewOnMouse: {
  type: Boolean,
  default: false
},
/**
   * set the video to playsinline as it's loaded
   */
playsinline: {
  type: Boolean,
  default: false
},
/**
   * set a image placeholder util the video start to play once
   */
poster: String,
/**
   * if you want a video teaser you can use this, will be played with-out sound
   */
videoPlaceholderSrc: String,
/**
   * define the volume of the player
 * values from 0 util 1
   */
volume: {
  type: Number,
  default: undefined
},
/**
   * show/hide the controls
   */
controls:  {
  type: Boolean,
  default: undefined
},
/**
   * class for the overlay
   */
overlayClass: {
  default: "vue-video-center"
},
/**
   * class for the controls bar
   */
controlsClass:{
  default: "vue-video-player-controls"
},
/**
   * class for the play button
   */
playButtonClass:{
  default: null
},
/**
   * style for the play button
   */
playButtonStyle:{
  default: null
},
/**
   * class for the volume button
   */
volumeButtonClass:{
  default: null
},
/**
   * style for the volume button
   */
volumeButtonStyle:{
  default: null
},
/**
   * class for the timer
   */
timerClass:{
  default: 'timer'
},
/**
   * style for the timer
   */
timerStyle:{
  default: null
},
/**
   * class for the fullscreen button
   */
fullscreenButtonClass:{
  default: 'fullscreen-button-class'
},
/**
   * style for the fullscreen button
   */
fullscreenButtonStyle:{
  default: null
},
/**
   * style for the controls bar
   */
controlsStyle: {
  default: undefined
}