Nation Library - StandardVideoPlayer example

Shows how to create an HTML5 video player with custom controls

by NationStudio

HTML

<script src="https://techdocs.wearenation.co.uk/nation/Utils.js"></script>
<script src="https://techdocs.wearenation.co.uk/nation/EventDispatcher.js"></script>
<script src="https://techdocs.wearenation.co.uk/nation/MediaControls.js"></script>
<script src="https://techdocs.wearenation.co.uk/nation/ProgressBar.js"></script>
<script src="https://techdocs.wearenation.co.uk/nation/video/StandardVideoPlayer.js"></script>
<script src="https://techdocs.wearenation.co.uk/nation/video/BasicVideoPlayer.js"></script>
<script src="https://techdocs.wearenation.co.uk/nation/Animation.js"></script>
<div class="js-video-player" data-video="https://techdocs.wearenation.co.uk/js/assets/test-video.mp4" data-webm="https://techdocs.wearenation.co.uk/js/assets/test-video.webm">
  <div class="js-player">
    
  </div>
  <div class="controls-container">
    <div class="js-video-overlay"></div>
    <div class="js-controls">
      <div class="js-progress-bar">
        <div class="js-progress"></div>
        <div class="js-hitarea"></div>
        <div class="js-handle"></div>
      </div>
      <a href="#" class="js-play-button button"></a>
      <a href="#" class="js-mute-button button"></a>
      <a href="#" class="js-full-screen-button button"></a>
      <div class="times">
        <span class="js-current-time">0:00</span>
        <span class="js-duration">0:00</span>
      </div>
    </div>
  </div>
</div>

CSS

.js-video-player {
  position: relative;
  width: 450px;
  background: #000;
}

video {
  width: 100%;
}

.js-player {
  
}

.controls-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.js-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
}

.js-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  font-family: sans-serif;
  background: #000;
}

.button {
  display: inline-block;
  min-width: 70px;
  margin-top: 10px;
  padding: 5px;
  border: 0;
  text-align: center;
  cursor: pointer;
  color: #fff;
  text-decoration: none;
  background: #0C54D9;
  font-family: sans-serif;
}
button.active {
  background: #ff0066;
}

.js-play-button:after {
  content: "Play";
}
.js-play-button.active:after {
  content: "Pause";
}

.js-mute-button:after {
  content: "Mute";
}
.js-mute-button.active:after {
  content: "UnMute";
}

.js-full-screen-button:after {
  content: "Enter Full Screen";
}
.js-full-screen-button.active:after {
  content: "Exit full screen";
}

.js-progress-bar {
  position: relative;
  height: 10px;
  background: #0D398B;
}

.js-progress {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: #0C54D9;
}

.js-hitarea {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.js-handle {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 100%;
  cursor: pointer;
  background: #ff0066;
}

.times {
  position: absolute;
  right: 10px;
  bottom: 5px;
  font-family: sans-serif;
  color: #fff;
}

.js-current-time:after {
  content: " /";
}

JavaScript

// To automatically initiate a video, 
// use the attribute 'data-video' for the h264 URL
// use the attribute 'data-webm' for the Webm URL
// use the attribute 'data-ogg' for the ogg URL
var element = document.querySelector(".js-video-player");

// Set options to use custom controls, and mute sound
var options = {
  controls: false,
  mute: true,
  autoPlay: true
};

// Controls options. Note that the full screen button ere
// won't actually enter fullscreen mode, due to restrictions
// on iframes (jsFiddle doesn't have the "allowfullscreen"
// attribute on their iframe)
var controlsOptions = {
  slide: true,
  easing: "easeInOutQuad",
  handlePositioning: "inside"
};

// Create the player
var player = new NATION.video.StandardVideoPlayer(element, options, controlsOptions);