Bootstrap responsive video player with advance setting

Bootstrap Video Player

A customizable HTML5 video player plugin for jQuery based on bootstrap UI.You can use this player to any website.And you can also add more features in this responsive video player.



Current version: 1.0

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

Features

-easy to Customize with css

- support multiple videos in one page

- simple use of HTML5 video tag

- show pause/play button

- show progress bar

- show video timer

- show & set volume value 1..10

- enable full screen button

- enable auto hide control bar

- enable auto play

Documentation

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
});

Advance Setting

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

In this tutorial I have shared Bootstrap Responsive Media Player with you,you can also add more feature in this player.Please feel free to leave a feedback.