Skip to main content

Bootstrap responsive video player with advance setting

Bootstrap responsive video player


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












PropertyDefaultDescription
playMediatrueshow pause/play button
progressMediatrueshow progress bar
timerMediatrueshow video timer
volumeMedia5show & set volume value 1..10
fullscreenMediatrueenable full screen button
autoHidetrueenable auto hide control bar
autoPlayfalseenable 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.


Labels:

Comments

Post a Comment

Feel free to leave your message here.

Popular posts from this blog

Windows 7 Home Premium 32 Bit free download Direct Link

People often ask us which version of Windows they should purchase for their new PC build. Generally speaking Windows 7 Home Premium Edition has everything that most end users would need for normal day-to-day usage of their PC. There is no use in paying extra for Windows 7 Professional Edition if the added features will be of no benefit to you. Here is a list of the major differences between Windows 7 Home Premium and Windows 7 Professional. Memory support Home Premium:  16GB of physical memory supported Recent tests of a mid range Windows 7 based PC with configurations of 4GB, 8GB and 16GB of system memory have shown only a marginal overall performance benefit between 8GB and 4GB. No performance improvement was evident when moving from 8GB to 16GB, therefore I do not see the 16GB physical memory limitation of Home Edition to be an issue when choosing an operating system. Backup and restore Home Premium:  Limited to local HDD or DVD The Backup and Restore centre was first int...
Post a Comment
Read more

Making a Really Cool jQuery Image Gallery

jQuery Image Gallery In this tutorial we will create a beautiful jQuery Image Gallery for website using jQuery Lightbox plugin.You can use this gallery in your website or you can show images.One of the main benefits of using a popular java script library, such as jQuery, is the incredible number of available plug-ins that will kick-start any development project. There is no need to Download the plug-in – I’ve included it in the demo files, so grab them and get on reading. The XHTML We start off with our XHTML front-end. demo.php <div id="container"> <div id="heading"> <!-- the heading --> <h1>A cool jQuery gallery</h1> </div> <div id="gallery"> <!-- this is the containing div for the images --> <?php //our php code goes here ?> <div class="clear"></div> <!-- using clearfix --> </div> <div id="footer"> <!-- some tutorial info --> </div...
Post a Comment
Read more

How to Build a Professional Website /Learn how to build website

Build a professional website ,and earn money using your website .Learn all these all lessons step by step.Y ou will learn how to structure a web page using HTML , style a web page using CSS , and how to do all of this quickly using Bootstrap . Build the Airbnb home page and learn the fundamentals of web developmen t in the process.You will learn how to structure a web page using HTML , style a web page using CSS , and how to do all of this quickly using Bootstrap. What you will learn You will learn how to structure a web page using HTML, style a web page using CSS, and how to do all of this quickly using Bootstrap. We had done worked hard on this topic  please give us  like  &  Share  Credit..                 If you want to save your work then follow these instructions:- 1.Select 1st lesson if you are beginner 2.SignIn option is given on the header of these lessons.Click SignIn 3.SignIn using Facebook Acco...
Post a Comment
Read more