HTML5 video build guide: Standard video module

Step 2: Add custom video controls

Add video controls by setting up custom buttons in your creative.

Step 1: Add buttons and styling

Create a <div> for each video control button (play, pause, etc.) in the HTML file and give each a unique ID. Then style them in the CSS file.

Sample tags in the HTML file
<div id="play-btn" class="video-controls">PLAY</div>
<div id="pause-btn" class="video-controls">PAUSE</div>
<div id="mute-btn" class="video-controls">MUTE</div>
<div id="unmute-btn" class="video-controls">UNMUTE</div>
<div id="stop-btn" class="video-controls">STOP</div>
<div id="replay-btn" class="video-controls">REPLAY</div>
Sample styling in the CSS file
.video-controls {
   position: absolute;
   width: 50px;
   height: 20px;
   cursor: pointer;
   background-color: #FFF;
   border: 1px solid #000;

#play-btn {
   left: 5px;

#pause-btn {
   left: 5px;

#mute-btn {
   left: 60px;

#unmute-btn {
   left: 60px;

#stop-btn {
   left: 115px;

#replay-btn {
   left: 115px;

Step 2: Add JavaScript code to handle events

In your creative's JavaScript file, assign variables for each video control button, then add event listeners. Next, add code to respond when each button is clicked.

A few video features aren't available with HTML5 video. Make sure you work around them accordingly.
  • There's no stop method available. Instead, pause the video and set currentTime to 0.
  • There's no replay method available. Instead, set currentTime to 0 and play the video again.
Code snippet
var playBtn = document.getElementById('play-btn');
var pauseBtn = document.getElementById('pause-btn');
var muteBtn = document.getElementById('mute-btn');
var unmuteBtn = document.getElementById('unmute-btn');
var stopBtn = document.getElementById('stop-btn');
var replayBtn = document.getElementById('replay-btn');

playBtn.addEventListener('click', pausePlayHandler, false);
pauseBtn.addEventListener('click', pausePlayHandler, false);
muteBtn.addEventListener('click', muteUnmuteHandler, false);
unmuteBtn.addEventListener('click', muteUnmuteHandler, false);
stopBtn.addEventListener('click', stopHandler, false);
replayBtn.addEventListener('click', replayHandler, false);

function pausePlayHandler(e) {
   if (video1.paused) {
       // If paused, then play;
        // Show pause button and hide play button = 'visible'; = 'hidden';
   } else {
       // If playing, then pause
       // Show play button and hide pause button = 'hidden'; = 'visible';

function muteUnmuteHandler(e) {
   if (video1.volume == 0.0) {
       // If muted, then turn it on
       video1.volume = 1.0;
       // Show mute button and hide unmute button = 'visible'; = 'hidden';
   } else {
       // If unmuted, then turn it off
       video1.volume = 0.0;
       // Show unmute button and hide mute button = 'hidden'; = 'visible';

function stopHandler(e) {
   // There is no stop method for HTML5 video
   // As a workaround, pause the video
   // and set currentTime to 0
   video1.currentTime = 0;
   // Show or hide other video buttons accordingly

function replayHandler(e) {
   // There is no replay method for HTML5 video
   // As a workaround, set currentTime to 0
   // and play the video
   video1.currentTime = 0;;
   // Show or hide other video buttons accordingly
Was this helpful?
How can we improve it?