Simple VueJS 2 Component that make your HTML5 Videos prettier.
DEMO: https://vuevid.herokuapp.com/
The only dependency VueVid needs is FontAwesome - make sure you have installed It, otherwise the icons won't be displayed.
$ npm install vue-vid --save
Then import It, and declare as component.
import VueVid from 'vue-vid'
export default {
...
components: {
VueVid
}
...
}
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.
Special thanks to Wes Bos who made and style this player with Vanilla JS.