Supercharge your Site with Video, The Controls

  • Published on Monday, 19 November 2012 01:48
  • Hits: 3288
User Rating:  / 1
PoorBest 

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>
</object>
</video>

..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??

  • video.currentTime. Current Time of which the scene is withing the length of the whole video.
  • video.duration. Duration of the video from the beginning.
  • video.volume. Volume of the audio which comes with the video.
  • video.style.width. Width of the video.
  • video.style.height. Height of the video.
  • video.style.position. It can be fixed, absolute, static, relative or inherit. To know the description of each of them click here.
  • video.style.left. Position of the left Side of the video player.
  • video.style.top. Position of the top side of the video player

And the following events:

  • video.play(); Play de video
  • video.pause(); Pause the video

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

The controls will be:

  • Play/Pause Button
  • Progress Bar (style float: left, os it places just on the right of the play/Pause Button)
  • Playtime (style float: left, os it places just on the right of the Progress Bar)
  • Volume (style float: left, os it places just on the right of the Play Time)
  • FullScreen On/Off (style float: left, os it places just on the right of the Volume control)

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.position=(type=="full")?"fixed":"absolute";
  controls.style.top = (video.offsetHeight - controls.offsetHeight) + "px";
  controls.style.left = "0px";
  controls.style.width = video.offsetWidth + "px";
  progressBarSize();
}

..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)
    setFullScreen();
  else
    videoOriginalSize();
}, 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";
updateTimeDisplay();
}

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){
  setPlayProgress(e.pageX);
}, 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";
  updateTimeDisplay();
}

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

function stopTrackingPlayProgress(){
  clearInterval(playProgressInterval);
}

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:

window.setInterval(function(t){
  if (video.readyState>0) {
    durationTime.innerHTML = formatTime(video.duration);
    clearInterval(t);
  }
},500);

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) {
          play();
        } else {
          pause();
        }
 }, true);

 And now the play and Pause functions

function play(){
      video.play();
      playButton.className = "paused";
      trackPlayProgress();
    }
function pause(){
      video.pause();
      playButton.className = "playing";
      stopTrackingPlayProgress();
}

Setting the volume Up and Down

function Volume(type) {
      if ("up")
       {
        if (video.volume < 1)
         video.volume = video.volume + 0.1;
       }
     else
      {
       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;

The HTML

....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>
<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″>
</iframe>

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

 

Take a peek to the rest of this tutorial:

Music You like..

IT News to be aware of ..

Most Visited...

QR Codes: The best 9 QR Code Generators

Hits:42560

QR Codes: The best 9 QR Code Generators

Last week we talked a little bit about how the QR Codes are becoming very, very popular and a bit of its history which is always good to know :)...

Read more

AngularJS, No more Dom Manipulation

Hits:7450

AngularJS, No more Dom Manipulation

You love to access the DOM, to change the information in it. You just love it!!!, ..but that is because you are using JQuery. It is like using assembly language,...

Read more

Famous, the most beautiful javascript Li…

Hits:4755

Famous, the most beautiful javascript Library

Yes, now there a couple of ways of becoming famous, ..the first one is following your dreams and becoming the best in class developer with a great idea, or use...

Read more