Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to work with video tag in HTML5

Adding video to pages is an exciting feature in HTML5. This article looks at how to make use of the new video tag in HTML5 to provide video to your web pages.

In my last article I explained about audio in HTML5. Another important feature of HTML5 is video. The new feature allows to access video directly from an HTML5 web page. Let us have a look at this feature.

Browser compatibility for common video formats

Browser H.264/mp4 WebM ogg
IE9 YES NO NO
Firefox NO YES YES
Chrome YES YES YES
Safari YES NO NO
Opera NO YES YES

Browser support for video element in HTML5

The video element is supported by IE9, Firefox, Safari, Opera and Chrome. IE8 and earlier versions does not support the element.

Syntax of the element

Lets have a look at the syntax of the video element.

Listing 1 : Syntax of the element

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Video</title>
</head>
<body>
<video src="mbAux1small.mp4" ></video>
</body>
</html>

You can see that the syntax is very similar to the syntax of the element. The attribute src specifies the source of the video.

Attributes of the video element

The various attributes of the element are the following

  • Src
  • Poster
  • Preload
  • Loop
  • Controls
  • Autoplay
  • Width and height

The source tag

The src attribute specifies the source of the video. You can see from the browser compatibility table in the beginning of this article that not all video formats are supported by the common browsers. HTML5 overcomes this issue by providing the tag using which multiple sources of video can be specified for the same element. This is useful as you can create multiple formats of the same video and specify them using tags.

The basic syntax of the tag is as follows

Listing 2: Syntax of the tag

<source src=”filename.ext” type=”video/type; codec=’codec1, codec2’”>

When the browser encounters a element with multiple tags its goes through each of the source tags and tries to preload them till it finds a format it can play. This process can be made faster if the optional type attribute is included in the tag. The value of the type attribute is a valid MIME type. When the type attribute is present the browser tries to read the MIME type and attempts to preload only the video format which is compatible with. It does not try to preload the formats which it is not compatible with. A codec can also me specified if known as the browser is sensitive about the codec even for a compatible video format. As with the type attribute, the browser tries to avoid the codecs which it cannot format.

Listing 3: Using the tag

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Video</title>
</head>
<body>
<video>
  <source src="html5movie.mp4" type="video/mp4; codecs=’mp4v.20.8’">
  <source src=" html5movie.ogg" type="video/ogg; codecs=’theora, vorbis’">
  <source src=" html5movie.webm" type="video/webm; codecs=’vorbis,vp8’">
Your browser does not support the video tag.
</video> 
</body>
</html>

With the above code listing the browser tries to play the compatible format. If not it shows the message.

Poster attribute

The poster attribute is used for large videos and slower connections. When it takes long for the video to play the attribute gives user something to look at. The value of the attribute can be a thumbnail related to the video.

Listing 4: Poster attribute

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Video</title>
</head>
<body>
<video poster=”thumbnail.png”>
  <source src="html5movie.mp4" type="video/mp4; codecs=’mp4v.20.8’">
  <source src=" html5movie.ogg" type="video/ogg; codecs=’theora, vorbis’">
  <source src=" html5movie.webm" type="video/webm; codecs=’vorbis,vp8’">
Your browser does not support the video tag.
</video> 
</body>
</html>

Preload attribute

The attribute when present starts to preload the video as soon as the page loads. This is important on a web page when the video is the main feature of the page. However when it forms a minor part of the page , the attribute can result in unwanted usage of internet resources.

Listing 5: preload attribute

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Video</title>
</head>
<body>
<video poster=”thumbnail.png” preload>
  <source src="html5movie.mp4" type="video/mp4; codecs=’mp4v.20.8’">
  <source src=" html5movie.ogg" type="video/ogg; codecs=’theora, vorbis’">
  <source src=" html5movie.webm" type="video/webm; codecs=’vorbis,vp8’">
Your browser does not support the video tag.
</video> 
</body>
</html>

The simplest form of attribute does not have a value. However, the attribute can take the following values.

None: This may seem strange but if the chance of using the video is remote, the developer can decide not to use internet resources and set the value to none.

Metadata: All video files have some information associated with them like duration, width, height or some other data associated with it which the author of the file might have placed. In a scenario where the chance of playing the video is low, metadata can be displayed if reasonable and it does not take up much internet resources.

Auto: This simply acts as a reminder that the video is going to preload. It is equal to not having any assignment to the preload attribute.

Autoplay attribute

With the autoplay attribute, the video starts to play as soon as the page loads. The attribute is a Boolean attribute. If present, it plays the video automatically and ends. It is fairly safe to use this attribute without the controls attribute. However you can use poster attribute so that in case of slow internet connections the user is presented with a thumbnail that relates to the video.

Listing 6: autoplay attribute

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Video</title>
</head>
<body>
<video poster=”thumbnail.png” autoplay>
  <source src="html5movie.mp4" type="video/mp4; codecs=’mp4v.20.8’">
  <source src=" html5movie.ogg" type="video/ogg; codecs=’theora, vorbis’">
  <source src=" html5movie.webm" type="video/webm; codecs=’vorbis,vp8’">
Your browser does not support the video tag.
</video> 
</body>
</html>

Loop attribute

When this attribute is used it plays the video again as soon as it ends. So it is important that this attribute is used wisely. Using the loop attribute with every video on your web page can end in unwanted usage of internet resources. Also, the present of a video or ad that plays on and on can make an end user go away from your page. They will notice it for sure, but in a negative manner. However if you have a short duration video with no considerable movements, you can loop that if it proves useful. It is also advisable to use the controls attribute when you use the loop attribute.

Listing 7: loop attribute

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Video</title>
</head>
<body>
<video poster=”thumbnail.png” loop contols>
  <source src="html5movie.mp4" type="video/mp4; codecs=’mp4v.20.8’">
  <source src=" html5movie.ogg" type="video/ogg; codecs=’theora, vorbis’">
  <source src=" html5movie.webm" type="video/webm; codecs=’vorbis,vp8’">
Your browser does not support the video tag.
</video> 
</body>
</html>" target="_blank"><!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Video</title>
</head>
<body>
<video poster=”thumbnail.png” loop contols>
  <source src="html5movie.mp4" type="video/mp4; codecs=’mp4v.20.8’">
  <source src=" html5movie.ogg" type="video/ogg; codecs=’theora, vorbis’">
  <source src=" html5movie.webm" type="video/webm; codecs=’vorbis,vp8’">
Your browser does not support the video tag.
</video> 
</body>
</html>

Controls attribute

The controls attribute provides the end user with a graphic control beneath the video. It allows the end user to perform the following

  • Start the video
  • Stop the video
  • Mute the video
  • Control volume
  • Time position
  • Scrubber control to move along the video as required

The presentation of the control varies across the different browsers as shown in the images at the end of the article. The controls attribute is also a Boolean attribute without any value.

Listing 8: controls attribute

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Video</title>
</head>
<body>
<video poster=”thumbnail.png” loop contols>
  <source src="html5movie.mp4" type="video/mp4; codecs=’mp4v.20.8’">
  <source src=" html5movie.ogg" type="video/ogg; codecs=’theora, vorbis’">
  <source src=" html5movie.webm" type="video/webm; codecs=’vorbis,vp8’">
Your browser does not support the video tag.
</video> 
</body>
</html>

Width and height

The attributes are used to specify a width and height for the video. It is always better to use values which are closer to the actual width and height of the video.

Listing 9: width and height attribute

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Video</title>
</head>
<body>
<video poster=”thumbnail.png” loop contols width=”300” height=”200”>
  <source src="html5movie.mp4" type="video/mp4; codecs=’mp4v.20.8’">
  <source src=" html5movie.ogg" type="video/ogg; codecs=’theora, vorbis’">
  <source src=" html5movie.webm" type="video/webm; codecs=’vorbis,vp8’">
Your browser does not support the video tag.
</video> 
</body>
</html>

Outputs:

Video control in Firefox

Figure 1: Video control in Firefox

Chrome

Figure 2: Chrome

Opera

Figure 3: Opera

Safari

Figure 4: Safari

IE9

Figure 5: IE9

Hope you liked the article, see you next time.



I am a Senior Web Developer from London with over 5years of experience in ASP.NET, HTML, CSS. I am well versed in VB.Net, C# and SQL as well.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login