Responsive Custom HTML5 Video Player with jQuery

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.