VueVid

Simple VueJS 2 Component that make your HTML5 Videos prettier.

DEMO: https://vuevid.herokuapp.com/

Dependencies

The only dependency VueVid needs is FontAwesome - make sure you have installed It, otherwise the icons won't be displayed.

Install

$ npm install vue-vid --save

Then import It, and declare as component.

import VueVid from 'vue-vid'

export default {
  ...
  
  components: {
    VueVid
  }
  
  ...
}

Usage and Options

Usage:

<vue-vid :sources="['video.mp4', 'video.ogg', 'video.webm']"></vue-vid>

Options/Props:

sources - {Array, String} - If you want to pass video from other service such as Vimeo, or YouTube you can do It like this:

<vue-vid sources="https://vimeo.com/videoetc"></vue-vid>

In case you have your source URL stored into data model of your app, just bind the sources attribute:

<vue-vid :sources="sourceLink"></vue-vid>

You can also pass array, If you want support dfferent format of videos

<vue-vid :sources="['video.mp4', 'video.ogg', 'video.webm']"></vue-vid>

skip-backward - {Number(negative)} - {default: -10} - This value would set how much seconds video would go back when user click on skip backward button - It must be negative number.

skip-forward - {Number(positive)} - {default: 25} - This value would set how much seconds video would go forward when user click on skip forward button.

poster - {String} - You can provide poster for each video, by passing down poster URL.

auto-play - {Boolean} - {default: false} - play video automatically.

Credits

Special thanks to Wes Bos who made and style this player with Vanilla JS.