Posted 16th January 2015 | By Andy Taylor, Studio Manager

Images are great on websites; they improve the aesthetics, most of the time and make the already riveting content (writing that with this post in mind), even more interesting for the reader. However, video can be even better and the introduction of the <video> tag in HTML5 makes it easier than ever to add video to your site.

Adding the video

Here’s an example of how to add a video to your website:

<video width=”640” height=”480”> <source src=”foo.mp4” type=”video/mp4”> <source src=”foo.ogg” type=”video/ogg”> Your browser does not support the video tag. </video>

Here we are creating a video element, setting its dimensions and then offering two video sources with different file types. We have to do that because one video type will not work across all browsers, they like to make things difficult.

I’ve also added a message that will display if the browser does not support the <video> tag. I’m not going to discuss fallbacks here, but CSS Tricks’ article called "Video for Everybody" covers it well.

Take control of your video

Now we have our video displaying on the page lets look at how we can create some custom controls. In case you are asking "why not use the default controls?", you can, but every browser styles them differently. So if you want continuity across all browsers, you’re going to have to create your own.

Play it

First things first we’ll get the video to play. We’ll do this by creating an element for the user to click:

<button id=”play-video”>Play</button>

Then using JavaScript, we’ll listen for the button being pressed and call the function that starts the video.

var vid = document.getElementById(‘video’); var playButton = document.getElementById(‘play-video’); playButton.addEventListener(‘click’, function() { vid.play(); });

We now have a button that can play the video. And because it’s a normal HTML element you can make it look as your heart desires.

Pause it

Now we have the video playing, we need a way for the user to pause it. Lets create another button.

<button id=”pause-video”>Pause</button>

Then back in the JavaScript we can listen for it being clicked:

var pauseButton = document.getElementById(‘pause-video’); pauseButton.addEventListener(‘click’, function() { vid.pause(); });

Crank up the volume

Media volume is often controlled using a slider, so I’ll show you how to replicate that with your own. Next to your play and pause buttons add the following:

<input type=”range” id=”volume” min=”0” max=”1” step=”0.2” value=”1”>

This will add a slider with 5 steps, meaning 5 different volume settings.Now lets look at how we can hook this up to the video. Back in the JavaScript code add the following:

var vol = document.getElementById(‘volume’); vol.addEventListener(‘change’, function() { vid.volume = volume.value; });

Here we are listening for the range value being changed. We then set the volume value of the video to the same as the range. It is important to note that the min and max attributes set in the range input element are the same as the min and max values allowed for the volume.

Working Example

Below you can see an example of everything I've just shown you.

 

This blog post is only scratching the surface of the HTML5 video API, but it demonstrates the simplicity of the video element.

Further reading

Mozilla have a great article on using HTML audio and video, which covers the API in more detail, including seek bars and legacy fallbacks.

 

Written by Andy Taylor, Web Developer at ExtraMile Communications.

At ExtraMile we try to take an hour out each week to look around us at what others do and to gain inspiration and to admire people's creativity. Each post in this series is one staff member's take on the world of web, design and things online. We hope you enjoy it.

Andy

About Andy | Meet our Studio Manager

Excitable Studio Manager/Lead Developer