Bootstrap video player

A customizable HTML5 video player plugin for jQuery based on bootstrap UI

Current version: 1.0
Tested in: jQuery 1.6+ in Firefox, Safari, Chrome, Internet Explorer 9, Opera 11.

Getting started

files to includes

<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/video-default.css" rel="stylesheet">
<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>

HTML markup structure

<div class="videoUiWrapper thumbnail">
  <video width="370" height="214" id="demo1">
    <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>

Default setup Bootstrap video player

$('#demo1').videoUI();

Setup with some option

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

Default setup demo

Settings

Property Default Description
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