HTML5 comes with many new elements and tricks which can enhance you website in different ways. One of these elements is video tag. What HTML5 is suppose to do is to replace the old, and harder to use, technology called flash. Before HTML5 video appeared, there was no standard for showing videos on web pages and everything could be played only with a plug-ins (like flash) installed in your browser. However, there were two main problems in this approach. If you didn’t have that special plug-in you have no chance to see the video and the second problem was that different browsers supported different plug-ins. So If you wanted to see that media content you needed either to install the plug-in or the browser. Yeah, talk about user-centric design… Do you need more reasons to switch to HTML5? OK, let’s dig little bit deeper into the HTML5 video tag.
To start, we will create simple structure for our page:
<!doctype html> <html lang="en"> <head> <title>HTML5 video tutorial</title<> </head> <body> <script src="js/script.js"></script> </body> </html>
Simple HTML5 valid code. Now we will add the video tag.
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"></source> <source src="movie.ogg" type="video/ogg"></source> <p>"Sorry, you browser doesn't support HTML5 video"</p> </video>
You can se on our example, we are defining the video’s width and height right in our html code. You can also define it through the CSS style sheet or not define them at all. I tested both (Chrome) and they seems to work as well. If you omit the width and height attributes, browser will render the video based on it’s default resolution. The last attribute tells browser to allow showing the video controls. There is no true or false value. if you don’t want to enable controls, remove the attribute completely. As you may noticed, we are not including the destination of our video file into the tag but into the source tag nested in it instead. This approach is same with audio tag. The source tag has two attributes src and type. Src is simply where your video file is placed – online server, local disk etc.. Type attribute is where you specify what type of video you are serving to browser to render. This way, you are making it easier in case the browser doesn’t support that particular media format. I forgot to mention that not all browsers support the same video formats (same with audio). Why make it easier for designer and developers right? So, the browser will look at the MIME type of video and if it’s not supported it will be skipped. The text on the last line will be display if neither of our video files have supported format. Below are the formats and their browser support:
IE – MP4
Chrome – MP4, WebM, Ogg
Firefox – MP4 (v21 for Windows, v30 for Linux), WebM, Ogg
Safari – MP4
Opera – WebM, OGG
Another important thing for you are MIME types for these video formats:
MP4 – video/mp4
WebM – video/webm
Ogg – video/ogg
At this point, we are done. We have working video embeded on our website and there is not much you can do – you can play with some CSS properties like borders, filters (I will cover them in future tutorial) etc.
However, if you don’t like the default controls, you can create your own using HTML, CSS and some JavaScript. Let’s enhance our player with our own custom controls. First, remove the controls attribute and add id with value of “video-container” (for JavaScript).
<video width="320" height="240" id="video-container"> <source src="movie.mp4" type="video/mp4"></source> <source src="movie.ogg" type="video/ogg"></source> <p>"Sorry, you browser doesn't support HTML5 video"</p> </video>
Next, we will add our buttons with id “video-controls” (for JavaScript) and some button tags.
<div id="video-controls"> <button type="button" id="play">Play</button> <button type="button" id="mute">Mute</button> </div>
Next we will setup the JavaScript.
// Our video container
var video = document.getElementById('video');
// Our buttons
var playButton = document.getElementById('play');
var muteButton = document.getElementById('mute');
Great! We defined all variables we will need in order to make the buttons work. Now let’s make our play/pause and mute button work.
// Adding event listener for the play/pause button
playButton.addEventListener('click', function() {
if (video.paused == true) {
// Play the video
video.play();
// Update the text of button to 'Pause'
playButton.innerHTML = 'Pause';
} else {
// Pause the video
video.pause();
// Update the text of button to 'Play'
playButton.innerHTML = 'Play';
}
});
// Adding event listener for the mute button
muteButton.addEventListener('click', function() {
if(video.muted === false) {
// Mute the video
video.muted = true;
// Update the text of button
this.innerHTML = 'Muted';
} else {
// Unmute the video
video.muted = false;
// Update the text of button
this.innerHTML = 'Mute';
}
});
The last thing cool thing to add is the ability to play or pause video by clicking on it.
// Play/pause video by clicking on it
video.addEventListener('click', function() {
if(video.paused === true) {
video.play();
} else {
video.pause();
}
});
This is the real end of this tutorial. I hope that you enjoyed it and also have better understanding how HTML5 video API works. See ya!
Codepen example:
https://codepen.io/d3v3r0/pen/iteIu
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
