Customizable Bootstrap Video Player Plugin for jQuery - Video UI

File Size: 119KB
Views Total: 23092
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Customizable Bootstrap Video Player Plugin for jQuery - Video UI

Video UI is a bootstrap UI based jquery plugin for creating Customizable HTML5 video player on your web page. This plugin use html5 video tag so that it only supports modern browser which fully support HTML5.

How to use it:

1.  Include jQuery library and jquery.video-ui.js

<script type="text/javascript" src="assets/js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.video-ui.js"></script>

2.  Include bootstrap UI CSS

<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">

3. Markup

<div class="videoUiWrapper thumbnail">
  <video width="480" height="400" id="demo">
    <source src="pathtovideo/video.ogv" type="video/ogg"> 
    <source src="pathtovideo/video.mp4" type="video/mp4">
    Your browser does not support the video tag. 
  </video>
</div>

4. Call the plugin with options

$('#demo').videoUI({
'autoHide':false,
'volumeMedia': 1
}); 

5. More Options

playMedia: true,	// show pause/play button
progressMedia: true,	// show progress bar
timerMedia: true,	// show video timer
volumeMedia: 5, 	// show & set volume value 1..10
fullscreenMedia: true,	// enable full screen button
autoHide: true,         // enable auto hide control bar
autoPlay: false,	// enable auto play

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.