Mastering HTML5 video

The times when you had to use various plugins media companies tried to force on you in order to play some video are gone. With the arrival of HTML5 and its video feature there is no longer need to use technologies such as flash or Quicktime. Now you can easily play any video using HTML5 without installing any 3rd-part plugin or software. You can do the same thing with audio too. Just sit down and click play. Today, we will take a look at those video and audio elements and understand how do they work.

Press play

Let’s talk about video element first. When you want to include a video on your website, all you have to do is to use video element. This can be done in two ways. First way is to use video as a self-closing tag (this is more a hack). This is useful in situations when you have only one source file in one format – not the best practice to follow. Another option is to use both, opening and closing, tags. I suggest you to use the later one with self-closing source element nested inside it.

HTML:

<video />

<video>
 <source>
</video>

video element also allow you to use various attributes. The first group are – width (in pixels), height (in pixels), src, poster and preload. These attributes need to have a specific value to be working. width and height are for size of the player. src refers to video file that will be used. poster is for image file that will be displayed while loading the video or until its played. The last attribute, preload, can have three values – auto, metadata and none – and it specifies if and how the video should be preloaded (not played). The second group of attributes are – autoplay (play automatically when page is loaded), controls (show controls), loop (play video in loop) and muted (without audio). These attributes don’t have any values.

The source element can have three additional attributes – media, src and type. However, in most cases you’ll probably use only the src for referring to video file and type for specifying the video format. Below are available MIME types you will use as a value for type attribute according to format of video.

MIME types:

MP4 – video/mp4

WebM – video/webm

Ogg – video/ogg

For better clarity, let’s create a simple example of HTML5 video. We will set the width to 320 and height to 240 (“px” keyword is omitted). It will also have controls, but the audio will be muted. We will provide the video through source element in two versions – ogg and mp4 – along with specific type.

HTML:

<video width=”320” height=”240” controls muted>
 <source src="sample.mp4" type="video/mp4">
 <source src="sample.ogg" type="video/ogg">
</video>

Support

Support for video element among browsers is pretty decent. You can use it successfully on any browser except IE 8 and Opera Mini 8. If you want to display some message to users whose browsers does not support video, just insert it between the video opening and closing tags.

HTML:

<video controls>
 <source src=".mp4" type="video/mp4">
 <source src=".ogg" type="video/ogg">
 Unfortunately, your browser doesn't support HTML5 video element.
</video>

Support of formats

To be able to provide our users chance to display and play some video, we have to serve video files in specific formats so the browsers can recognize them and load. The good news is that, as the time goes, browser support for individual formats is getting better. For better overview below is table with current state and also MIME types for these formats.

IE – MP4

Chrome – MP4, WebM, Ogg

Firefox – MP4 (21 for Windows, 30 for Linux), WebM, Ogg

Safari – MP4

Opera – MP4 (25+) WebM, OGG

Subtitles

No matter how great HTML5 video is or can be, we can find ourselves in situations when we can’t enjoy the sound. Some of these situations can be on public crowded places like restaurants or during lecture in school. How awesome it could be if we would have subtitles (or headphones)? Well, if you want you can add subtitles to the video with just a short piece of code. What’s more you don’t have to stay with one language. You can add as many subtitles as you have required source files for them. For these files, there are two formats available. You can use either .vtt (WebVTT) or .srt. The way to add subtitles to video is through track element nested inside video tags, just like source element. Another similarity to source element is that it has no closing tag.

HTML:

<video controls>
 <source src=".mp4" type="video/mp4">
 <source src=".ogg" type="video/ogg">
 <track>
</video>

This track element can contain up to five different attributes. These attributes are src, srclang, kind, label and default. src attribute works in the same way as in source element, it refers to file with subtitles. srclang is used for specifying the language of subtitles. kind is for specifying the kind of the file and it has four available values – captions, chapters, descriptions, metadata and subtitles. When you chose subtitles as a value, you also have to use srclang attribute. label is similar to labels in forms. It is used to describe the language of subtitles.

In case of multiple subtitle files, using label is easy way to differentiate between these language versions. The last attribute, default, has no additional value. It is used to mark which subtitles will be used as default if user turns them on. Simple example of using track element example can be adding English subtitles to the video above.

HTML:

<video controls>
 <source src="video.mp4" type="video/mp4">
 <source src="video.ogg" type="video/ogg">
 <track label=“English“ kind=“subtitles“ src-lang=“en“ src=“subtitles.vtt“>
</video>

Before closing this post, it is important to talk about support for track element. Most troubles will be probably caused by IE because only version 10 and up is supporting this element. On the other hand, Google Chrome (18+), Mozilla Firefox (31+), Safari (6+) and Opera (15+) – now on Webkit enging (same as Google Chrome) – should by OK.

Summary

As you can see, understanding HTML5 video is quite easy and can be done before your tea is finished. Why not to try some more complicated ideas to practice it further?

If you liked this article, please subscribe so you don't miss any future post.

Subscribe

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 Donate via Paypal