use an HTML5 video

HTML5 comes with many new components and methods which might improve you web site in several methods. One among these components is video tag. What HTML5 is suppose to do is to interchange the outdated, and more durable to make use of, know-how known as flash. Earlier than HTML5 video appeared, there was no commonplace for displaying movies on web pages and all the things could possibly be performed solely with a plug-ins (like flash) put in in your browser. Nonetheless, there have been two primary issues on this strategy. For those who didn’t have that particular plug-in you don’t have any probability to see the video and the second downside was that totally different browsers supported totally different plug-ins. So For those who needed to see that media content material you wanted both to put in the plug-in or the browser. Yeah, speak about user-centric design… Do you want extra causes to modify to HTML5? OK, let’s dig little bit deeper into the HTML5 video tag.

To begin, we’ll create easy construction for our web page:

<!doctype html>
<html lang="en">
<title>HTML5 video tutorial</title<>
<script src=""></script>

Easy HTML5 legitimate code. Now we’ll add the video tag.

<video width="320" peak="240" controls>
<supply src="" kind="video/mp4"></supply>
<supply src="film.ogg" kind="video/ogg"></supply>
<p>"Sorry, you browser would not assist HTML5 video"</p>

You may se on our instance, we’re defining the video’s width and peak proper in our html code. It’s also possible to outline it by the CSS model sheet or not outline them in any respect. I examined each (Chrome) and so they appears to work as effectively. For those who omit the width and peak attributes, browser will render the video based mostly on it’s default decision. The final attribute tells browser to permit displaying the video controls. There isn’t a true or false worth. for those who don’t need to allow controls, take away the attribute utterly. As chances are you’ll seen, we aren’t together with the vacation spot of our video file into the tag however into the supply tag nested in it as an alternative. This strategy is identical with audio tag. The supply tag has two attributes src and kind. Src is just the place your video file is positioned – on-line server, native disk and so on.. Sort attribute is the place you specify what kind of video you might be serving to browser to render. This fashion, you’re making it simpler in case the browser doesn’t assist that individual media format. I forgot to say that not all browsers assist the identical video codecs (identical with audio). Why make it simpler for designer and developers proper? So, the browser will have a look at the MIME kind of video and if it’s not supported it will likely be skipped. The textual content on the final line might be show if neither of our video recordsdata have supported format. Beneath are the codecs and their browser assist:

IE – MP4
Chrome – MP4, WebM, Ogg
Firefox – MP4 (v21 for Home windows, v30 for Linux), WebM, Ogg
Safari – MP4
Opera – WebM, OGG

One other essential factor for you might be MIME sorts for these video codecs:
MP4 – video/mp4
WebM – video/webm
Ogg – video/ogg

At this level, we’re executed. We’ve got working video embeded on our web site and there’s not a lot you are able to do – you may play with some CSS properties like borders, filters (I’ll cowl them in future tutorial) and so on.

Nonetheless, for those who don’t just like the default controls, you may create your individual utilizing HTML, CSS and a few JavaScript. Let’s improve our participant with our personal customized controls. First, take away the controls attribute and add id with worth of “video-container” (for JavaScript).

<video width="320" peak="240" id="video-container">
<supply src="" kind="video/mp4"></supply>
<supply src="film.ogg" kind="video/ogg"></supply>
<p>"Sorry, you browser would not assist HTML5 video"</p>

Subsequent, we’ll add our buttons with id “video-controls” (for JavaScript) and a few button tags.

<div id="video-controls">
<button kind="button" id="play">Play</button>
<button kind="button" id="mute">Mute</button>

Subsequent we’ll setup the JavaScript.

// Our video container
var video = doc.getElementById('video');

// Our buttons
var playButton = doc.getElementById('play');
var muteButton = doc.getElementById('mute');

Nice! We outlined all variables we’ll want so as to make the buttons work. Now let’s make our play/pause and mute button work.

// Including occasion listener for the play/pause button
playButton.addEventListener('click on', perform() {
 if (video.paused == true) {
 // Play the video;

 // Replace the textual content of button to 'Pause' 
 playButton.innerHTML = 'Pause';
 } else {
 // Pause the video

 // Replace the textual content of button to 'Play'
 playButton.innerHTML = 'Play';

// Including occasion listener for the mute button
muteButton.addEventListener('click on', perform() {
 if(video.muted === false) {
 // Mute the video
 video.muted = true;
 // Replace the textual content of button
 this.innerHTML = 'Muted';
 } else {
 // Unmute the video
 video.muted = false;
 // Replace the textual content of button
 this.innerHTML = 'Mute';

The very last thing cool factor so as to add is the flexibility to play or pause video by clicking on it.

// Play/pause video by clicking on it
video.addEventListener('click on', perform() {
 if(video.paused === true) {;
 } else {

That is the true finish of this tutorial. I hope that you simply loved it and now have higher understanding how HTML5 video API works. See ya!

Codepen instance:

For those who favored this text, please subscribe so you do not miss any future put up.

If you would like to assist me and this weblog, you may turn out to be a patron, or you should buy me a espresso 🙂

Abu Sayed is the Best Web, Game, XR and Blockchain Developer in Bangladesh. Don't forget to Checkout his Latest Projects.

Checkout extra Articles on Sayed.CYou

#HTML5 #video