Supercharge your Site with Video, The Controls

User Rating:  / 1
View Comments

Now that we have a video in our site, ...how do we allow the viewer to control it??, ...would it be a good idea to give out free Apple Remote to our customers but that would only works for those having a mac (a very expensive idea!!), or let's just include some controls to our video.

Something as easy as adding the "controls" parameter in our video tag:

<video controls width="360" height="240" poster="/poster.jpg">
<source src="/videofile1.ogv" type="video/ogg"/>
<source src="http://zencoder-demo.s3.amazonaws.com/trailer_test.mp4" type="video/mp4"/>
<object type="application/x-shockwave-flash" width="360" height="240" data="player.swf?file=videofile1.mp4">
<param name="movie" value="player.swf?file=videofile1.mp4"/>
<a href="/videofile1.mp4">Get the Movie</a>

..and that is how we finish our course today???......, yes, it is boooring, I know you prefer to have something more fancy, something that you may be able to customize to the design of your page, ...so time to get our own controls!!

Which are the attributes that we may want to change in the video Element??

And the following events:

In case you need to know all the attributes please take a look to this page.

The controls will be:

Let's start from the last of the controls as it affects to all the control positioning as well as the Progress Bar..

Normal Screen/Full Screen Switching:

function setFullScreen(){ 
  video.style.width = window.innerWidth + "px";
  video.style.height = window.innerHeight + "px";
  video.style.position = "fixed";
  video.style.left = 0;
  video.style.top = 0;
  controlSize("full"); //Resize the control to fullScreen
  fullScreenOn =true;
function videoOriginalSize(){
  video.style.width = videoWidth + "px";
  video.style.height = videoHeight + "px";
  video.style.position = "static";
  controlSize("Orig"); //Resize the control to Original Size Screen
  fullScreenOn =false;

Now let's check how to control the size of the controls

function controlSize(type){
  controls.style.top = (video.offsetHeight - controls.offsetHeight) + "px";
  controls.style.left = "0px";
  controls.style.width = video.offsetWidth + "px";

..one thing that you have to resize when resizing the controls is the progress Bar so here is the Code

function progressBarSize(){
  progressControl.style.width = (controls.offsetWidth - (sizeControlElemnts+8)) + "px";
  progressHolder.style.width = (progressControl.offsetWidth - 80) + "px";

and last the event handler in the FullScreen on/off Button

fullScreenControl.addEventListener("click", function(){
  if (!fullScreenOn)
}, true);

Progress Bar

The first thing to calculate the progress in the Bar based on the actual duration of the video:

function updatePlayProgress(){
 playProgressBar.style.width = ((video.currentTime / video.duration) * (progressHolder.offsetWidth)) + "px";

This needs to be calculated every third of the second:

function trackPlayProgress(){
  playProgressInterval = setInterval(updatePlayProgress, 33);

For this tutorial we will just control the Click event in the progress Bar, ..while in the last one we will used the click, drag and drop. So to control the click:

progressBar.addEventListener("click", function(e){
}, true);

and this is how we set the video to the time selected:

 function setPlayProgress(posX) {
  video.currentTime = video.duration*(posX-(progressBar.offsetLeft+1))/(progressBar.offsetWidth-2);
  playProgressBar.style.width = posX-(progressBar.offsetLeft+1) + "px";

..and to help with the performance you need to stop the interval for running when the video is stopped or pause

function stopTrackingPlayProgress(){

Current time indicator:

First of all let's indicate the length of the video but to bare in mind WebKit browsers you have to get the duration when the video has started being downloaded so use the readyState, and next the function to update the current time which is called in the previous progress Bar functions:

  if (video.readyState>0) {
    durationTime.innerHTML = formatTime(video.duration);

function updateTimeDisplay(){
  currentTime.innerHTML = formatTime(video.currentTime);

Finally as the duration is returned in seconds and miliseconds then we need to format the time:

function formatTime(seconds) {
hours = 0; seconds=Math.floor(seconds); if (seconds>=60) { minutes = Math.floor(seconds / 60); seconds = seconds - (minutes*60);
} if (minutes>=60)
hours = Math.floor(minutes / 60); minutes = minutes - (hours*60);
minutes = (minutes >= 10) ? minutes : "0" + minutes; seconds = (seconds >= 10) ? seconds : "0" + seconds;
if (hours>0)
return hours + ":" + minutes + ":" + seconds; else return minutes + ":" + seconds; }

The Play & Pause button

First of all we need to set a listener on the Play & Pause button to control when someone as you click on it, ..the variable with the play button has been called playButton as you can see later on.

playButton.addEventListener("click", function(){
        if (video.paused) {
        } else {
 }, true);

 And now the play and Pause functions

function play(){
      playButton.className = "paused";
function pause(){
      playButton.className = "playing";

Setting the volume Up and Down

function Volume(type) {
      if ("up")
        if (video.volume < 1)
         video.volume = video.volume + 0.1;
       if (video.volume > 0)
         video.volume = video.volume - 0.1;

...and let's refresh the Volume Display.

function updateVolumeDisplay(){
      var volNum = Math.floor(video.volume * 10);
      for(var i=0; i<10; i++) {
        if (i < volNum) {
          volumeDisplay.children[i].style.borderColor = "#fff";
        } else {
          volumeDisplay.children[i].style.borderColor = "#555";

You can control the volume with the control or with the ones in your device (keyboard, volume up and down in your tablet or mobile phone, etc).. So we need to have those in mind. For the first one we will just control the clicks in any of the 10 available volume tones:

For that we will just set an eventHandler in each of the 10 possible volume tones to set the volume when clickin on them>

volumeDisplay.children[0].addEventListener("click", function(){ Volume(1);},true);
volumeDisplay.children[1].addEventListener("click", function(){ Volume(2);},true);
volumeDisplay.children[2].addEventListener("click", function(){ Volume(3);},true);
volumeDisplay.children[3].addEventListener("click", function(){ Volume(4);},true);
volumeDisplay.children[4].addEventListener("click", function(){ Volume(5);},true);
volumeDisplay.children[5].addEventListener("click", function(){ Volume(6);},true);
volumeDisplay.children[6].addEventListener("click", function(){ Volume(7);},true);
volumeDisplay.children[7].addEventListener("click", function(){ Volume(8);},true);
volumeDisplay.children[8].addEventListener("click", function(){ Volume(9);},true);
volumeDisplay.children[9].addEventListener("click", function(){ Volume(10);},true);

and for the second HTML5 provides the volume and muted IDL attributes, as well as the volumechange event. The event is fired whenever the value of volume or muted is changed so that is the one we will use:

video.addEventListener("volumechange", updateVolumeDisplay,true);

Actually we will use this same event handler to show the volume status when clicking on the controls

Setting all the Variables

var video = document.getElementsByTagName('video')[0];
   var videoWidth = video.offsetWidth; //Store original width in global variable
   var videoHeight = video.offsetHeight; // Store original height in global variable
   var fullScreenOn =false;
   var fullScreen = document.getElementById("fullscreen");
   var volume = document.getElementById("volume");
   var volumeDisplay = document.getElementById("volumeDisplay");
   var playButton =  document.getElementById("play");
   var progressBar = document.getElementById("progressBar"); //Poner esto en el blog
   var progressControl = document.getElementById("progress");
   var playProgressBar = document.getElementById("progressStatus");
   var currentTime = document.getElementById("currentTime");
   var durationTime = document.getElementById("durationTime");
   var playProgressInterval;


....a very basic one, ...you come out with the styles or wait until fourth chapter to get the whole code from myself!!

<div id="controls" class="videoBox">
 <div id="play"></div>
 <div id="progress">
  <div id="progressBar"><div id="progressStatus"></div></div>
<div id="time"> <div id="currentTime">00:00</div> <div id="timeSeparator"></div> <div id="durationTime">00:00</div> </div> <div id="volume" class="control"> <ul id="volume_display">
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> </ul> </div> <div id="fullscreen"></div> </div>

..and before i forget, our video from the first moment is missing something, something that appears in all the videos that yo have seen around, ...a identifier Image, a Poster for our video, ..and we can get that with the Poster Attribute, select an Image which can be a local image or elsewhere on the web. Almost

<video controls width="360" height="240" poster="photo1.jpg">

It seems we are done!! and indeed we are, ..but not to have the perfect videoplayer. But hey, you cannot learn everything the same day. We will have a progress and volume control with click, drag &drop mouse actions, stopping and continue the video when clicking on it, etc, ...bu that will be in the last tutorial Lesson and with the HTML file with all the tutorial, ...so stay tuned!!.

Now as usual and starting to know how the controls are set take a look at the code from YouTube so u can see how the manage to build all its controls. I will just set a youtube video as easy as an iframe code for embedding YouTube videos is as follows, simply copy the Video ID and replace in the code below:

 <iframe type=”text/html” width=”640″ height=”385″ src=”http://www.youtube.com/embed/VIDEO_ID” frameborder=”0″>

..and following with the cover of these video tutorials i had to choose this video:


Take a peek to the rest of this tutorial: