Minimal HTML5 Video Player With Pure JavaScript

Preview:

Description:

A minimal, Vanilla JavaScript-based HTML5 video player with custom controls styled with your own CSS.

How to use it:

Embed an HTML5 video with player controls into the page.

<div class="player">
  <video class="player__video viewer" src="mov.mp4"></video>
  <div class="player__controls">
    <div class="progress">
      <div class="progress__filled"></div>
    </div>
    <button class="player__button toggle" title="Toggle Play">►</button>
    <input type="range" name="volume" class="player__slider" min="0" max="1" step="0.05" value="1">
    <input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
    <button data-skip="-10" class="player__button">« 10s</button>
    <button data-skip="25" class="player__button">25s »</button>
  </div>
</div>

Load the main player JavaScript at the end of the page.

<script src="js/index.js"></script>

The CSS to style the video player.

.player {
  max-width: 750px;
  border: 5px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  position: relative;
  font-size: 0;
  overflow: hidden;
}
/* This css is only applied when fullscreen is active. */
.player:fullscreen {
 max-width: none;
 width: 100%;
}
 .player:-webkit-full-screen {
 max-width: none;
 width: 100%;
}
.player__video { width: 100%; }
.player__button {
  background: none;
  border: 0;
  line-height: 1;
  color: white;
  text-align: center;
  outline: 0;
  padding: 0;
  cursor: pointer;
  max-width: 50px;
}
.player__button:focus { border-color: #ffc600; }
.player__slider {
  width: 10px;
  height: 30px;
}
.player__controls {
  display: flex;
  position: absolute;
  bottom: 0;
  width: 100%;
  transform: translateY(100%) translateY(-5px);
  transition: all 0.3s;
  flex-wrap: wrap;
  background: rgba(0, 0, 0, 0.1);
}
.player:hover .player__controls { transform: translateY(0); }
.player:hover .progress { height: 15px; }
.player__controls > * { flex: 1; }
.progress {
  flex: 10;
  position: relative;
  display: flex;
  flex-basis: 100%;
  height: 5px;
  transition: height 0.3s;
  background: rgba(0, 0, 0, 0.5);
  cursor: ew-resize;
}
.progress__filled {
  width: 50%;
  background: #ffc600;
  flex: 0;
  flex-basis: 50%;
}
/* unholy css to style input type="range" */
input[type="range"] {
  -webkit-appearance: none;
  background: transparent;
  width: 100%;
  margin: 0 5px;
}
input[type="range"]:focus { outline: none; }
input[type="range"]::-webkit-slider-runnable-track {
 width: 100%;
 height: 8.4px;
 cursor: pointer;
 box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
 background: rgba(255, 255, 255, 0.8);
 border-radius: 1.3px;
 border: 0.2px solid rgba(1, 1, 1, 0);
}
input[type="range"]::-webkit-slider-thumb {
 height: 15px;
 width: 15px;
 border-radius: 50px;
 background: #ffc600;
 cursor: pointer;
 -webkit-appearance: none;
 margin-top: -3.5px;
 box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}
input[type="range"]:focus::-webkit-slider-runnable-track {
 background: #bada55;
}
input[type="range"]::-moz-range-track {
 width: 100%;
 height: 8.4px;
 cursor: pointer;
 box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
 background: #ffffff;
 border-radius: 1.3px;
 border: 0.2px solid rgba(1, 1, 1, 0);
}
input[type="range"]::-moz-range-thumb {
 box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
 height: 15px;
 width: 15px;
 border-radius: 50px;
 background: #ffc600;
 cursor: pointer;
}