Responsive Custom HTML5 Video Player with jQuery
File Size: | 2.51 MB |
---|---|
Views Total: | 9142 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A lightweight jQuery script for creating a fully responsive HTML5 video player with custom controls based on Bootstrap, CSS3 and jQuery UI.
How to use it:
1. Load jQuery and other required resources in your web page.
<link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="jquery-ui.css"> ... <script src="jquery.min.js"></script> <script src="jquery-ui.min.js"></script> <script src="bootstrap.min.js"></script>
2. Load the core script after jQuery library.
<script src="js/script.js"></script>
3. Embed an Html5 video with custom controls into your web page.
<div id="media-player"> <video id="videoPlayer" preload="none" poster="img/cover.jpg" controls> <source src="demo.avi" type="video/mp4"> <source src="demo.ogg" type="video/ogg"> Your browser does not support the video element. </video> <div class="media-controls"> <div id="playControls"> <button type="button" class="btn glyphicon glyphicon-play" id="play_btn"></button> <button type="button" class="btn glyphicon glyphicon-stop" id="stop_btn"></button> </div> <div id="progressContainer"> <span id="progress-bar" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></span> </div> <div id="timeContainer"> <span id="currentTime">00:00</span> </div> <div id="volumeControls"> <div id="sliderContainer"> <div id="slider"></div> </div> <button id="volumeInc_btn" class="btn glyphicon glyphicon-volume-up"></button> <button id="replay_btn" class="btn glyphicon glyphicon-repeat" title="replay"></button> </div> </div> </div>
4. Add custom CSS styles to the Html5 video player.
#media-player video { width: 100%; } /* HIDE HTML VIDEO CONTROLS */ ::-webkit-media-controls { display:none !important; } .media-controls { margin-top: -9px; padding-top: 2px; height: 32px; background: #000; } #currentTime { color: #eee; } #progressContainer { float: left; background-color: #fff; margin-left: 10px; margin-right: 10px; margin-top: 12px; height: 5px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } #progress-bar { background-color: #34DDDD; height: 5px; border-radius: 5px !important; -webkit-box-shadow: 2px 0px 10px 2px rgba(52, 221, 221, .5); -moz-box-shadow: 2px 0px 10px 2px rgba(52, 221, 221, .5); box-shadow: 2px 0px 10px 2px rgba(52, 221, 221, .5); } .media-controls .btn { width: 40px; font-size: 12px; padding: 0 12px; margin-right: 2px; margin-top: 3px; background: -webkit-linear-gradient(top, #666666, #000000); background: -moz-linear-gradient(top, #666666, #000000); background: -ms-linear-gradient(top, #666666, #000000); background: -o-linear-gradient(top, #666666, #000000); background: linear-gradient(to bottom, #666666, #000000); color: #eee; /* COLOR OF THE GLYPHICONS */ border: 2px solid #666; float: left; } .btn:hover { color: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-decoration: normal; text-align: center; -o-text-overflow: clip; text-overflow: clip; white-space: pre; text-shadow: 0 0 10px rgba(52, 221, 221, 1), 0 0 20px rgba(52, 221, 221, 1), 0 0 30px rgba(52, 221, 221, 1), 0 0 40px #34DDDD, 0 0 70px #34DDDD, 0 0 80px #34DDDD, 0 0 100px #34DDDD; -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); } #playControls { height: 28px; float: left; margin-left: 7px; } #timeContainer { float: left; } #volumeControls { float: right; height: 28px; margin-right: 7px; } /*slider*/ #sliderContainer { padding: 6px 10px 10px 10px; position: absolute; margin-top: -117px !important; margin-left: 6px !important; display: none; /* background opacity*/ background: rgb(0,0,0); background: transparent\9; background: rgba(0,0,0,0.6); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000); zoom: 1; } /* Removes opacity from children */ #sliderContainer:nth-child(n) { filter: none; } #slider { border-width: 1px; border-style: solid; border-color: #333 #333 #777 #333; border-radius: 10px !important; width: 10px; height: 100px; box-shadow: inset 0 1px 5px 0px rgba(0, 0, 0, .5), 0 1px 0 0px rgba(250, 250, 250, .5); } .volume { display: inline-block; width: 25px; height: 25px; margin-top: -5px; } .ui-slider-handle { height: 10px !important; cursor: pointer !important; left: -0.35em !important; margin-bottom: -9px !important; } .ui-slider-range { background: linear-gradient(top, #ffffff 0%, #eaeaea 100%); position: absolute; border: 0; top: 0; height: 100%; border-radius: 25px; } .ui-slider { margin: 0px !important; float: left; } .browsehappy { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; }
Change logs:
2015-07-08
- Optimized image for better page speed.
2015-07-06
- Added a new volume glyph.
2015-07-03
- Major button style update
This awesome jQuery plugin is developed by fed-v. For more Advanced Usages, please check the demo page or visit the official website.