Nation Library - BasicVideoPlayer example

Shows how to create an HTML5 video player without 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/video/BasicVideoPlayer.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>

CSS

.js-video-player {
  width: 300px;
  background: #000;
}

video {
  width: 100%;
}

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 the stock YouTube controls
var options = {
  controls: true,
  mute: true
};

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