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
       video1.play();
        // Show pause button and hide play button
       pauseBtn.style.visibility = 'visible';
       playBtn.style.visibility = 'hidden';
   } else {
       // If playing, then pause
       video1.pause();
       // Show play button and hide pause button
       pauseBtn.style.visibility = 'hidden';
       playBtn.style.visibility = '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
       muteBtn.style.visibility = 'visible';
       unmuteBtn.style.visibility = 'hidden';
   } else {
       // If unmuted, then turn it off
       video1.volume = 0.0;
       // Show unmute button and hide mute button
       muteBtn.style.visibility = 'hidden';
       unmuteBtn.style.visibility = '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;
   video1.pause();
   // 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;
   video1.play();
   // Show or hide other video buttons accordingly
}