When the <video> was first introduced the native controls were not always the most visually exciting and certainly lacked some features such as full screen which sometimes made Flash a better option. The native players in all the major browsers have come on leaps and bounds and most now have the likes of fullscreen but they all certainly differ in appearance.

Native controls are switched on by the use of the controls attribute of the <video> tag.

<video width="360" height="202" controls>
<source src="hamster.mp4" type="video/mp4">
<source src="hamster.ogv" type="video/ogg">
<source src="hamster.webm" type="video/webm">
</video>

If you want to do away with the native controls and create your own with a view to maintaining some consistency across browsers then you can do so via the Video API. A full set of the properties, methods and events is available on w3c – we’ll look at some of the headline features you may find useful.

First of all we’ll remove the native controls by dropping the controls attribute of the <video> tag ie:

<video width="360" height="202" id="myVideo">

We’ll also need some Javascript to get hold of the video in the DOM. We can do this with ‘vanilla’ Javascript using a DOM selector like getElementById:

var mediaPlayer = document.getElementById('myVideo');

or if you prefer to use jQuery then use:

var mediaPlayer = $('#myVideo').get(0);

Warning: Notice with jQuery that we have to use get() which is used to get the native DOM element before applying the Video api to it.

Tip: The buttons in the demos that follow are all created using the HTML <button> tag and I have left them to be styled by the CSS in the same style as other buttons are on this blog. You can, of course, style these or any other elements up as you choose and then use them as the controls for your video.

Playing and Pausing

When you drop the controls attribute the first thing you’ll notice is that is now quite difficult to play the video (you can right-click). We do however have a play() method we can use:

<video width="360" height="202" id="myVid">
<source src="hamster.mp4" type="video/mp4">
<source src="hamster.ogv" type="video/ogg">
<source src="hamster.webm" type="video/webm">
</video>
<button id="playBtn">Play</button>
<script>
//using vanilla Javascript you can use 
var mediaPlayer = document.getElementById('myVid');
document.getElementById('playBtn').addEventListener('click', function(){
   mediaPlayer.play();
});
</script>



Lovely, hamster that it is you’ll want a pause as well. We can add a second <button> to call the pause() method.

<button id="playBtn">Play</button>
<button id="pauseBtn">Pause</button>
<script>
var mediaPlayer= document.getElementById('myVid');
document.getElementById('playBtn').addEventListener('click', function(){
   mediaPlayer.play();
});
document.getElementById('pauseBtn').addEventListener('click', function(){
   mediaPlayer.pause();
});
</script>


 

Detecting the Length and Current Time

To work out the percentage of a video played we have the duration and the currentTime properties. We’ll need an event as well to get the latest currentTime property and the timeupdate is perfect for this as it is triggered when the currentTime property changes. To display the percentage played we’ll add a simple bit of HTML to our example:

<p id="progress"></p>

Then we’ll use the following Javascript to calculate the percentage played.

mediaPlayer3.addEventListener('timeupdate', checkProgress);
function checkProgress(){
    var progressTime = mediaPlayer3.currentTime/mediaPlayer3.duration;
    progressTime = progressTime * 100;
    progressTime = Math.floor(progressTime);
    document.getElementById('progress').innerHTML = progressTime + "%";
}


 

Other uses of this would be detecting when the video has reached a certain position such as near the end.

View Demo

Getting and Setting the Volume

The volume of the audio can be detected with the volume property. The value of the volume is a number between 0 and 1 – where 0 is no volume and 1 is full volume. Sorry we just don’t go up to 11.

document.getElementById('volFull').addEventListener('click', function(){
   mediaPlayer.volume = 1;
});
document.getElementById('volHalf').addEventListener('click', function(){
   mediaPlayer.volume = 0.5;
});
document.getElementById('volNo').addEventListener('click', function(){
   mediaPlayer.volume = 0;
});


 

  

You may want to use a slider to set the volume. If you browser support the HTML5 input type of range then there is a built in slider to use.

<input id="volSlider" type="range" min="0" max="1" value="1" step="0.1" />

The above is used to create a slider with a range of values from 0 to 1 in steps of 0.1. This Javascript will take the value from the slider and use it to set the volume of the video.

document.getElementById('volSlider').addEventListener('change', function(ev){
	mediaPlayer.volume = ev.target.value
});

View Demo

Fun with playbackRate

The playbackRate property can be used to get and set the play back speed of the hamster, sorry video. Fun to be had here. First lets speed him up.


 

… then slow him down.


 

Both demos done with:

 mediaPlayer.playbackRate = // some value

As with the values used for setting the volume, the normal playback speed is 1. The fast example above uses a value of 4 and the slow one a value of 0.5.

By again using the likes of range slider we can vary this value.

View Demo

Leave a Comment