This is our definitive guide to the HTML5 Video tag in 2022.
In this comprehensive and easy-to-use guide, you will discover everything you need to know about working with HTML5 video.
This includes:
- What is the HTML5 Video Tag?
- How Does HTML5 Video Work?
- Common Problems with the HTML5 Video Tag
- Cross-browser HTML5 Video Tag Compatibility
- Converting HTML5 Video
- HTML5 Video Attributes
- How to Improve Video Accessibility
- The Elements of the ‘<track>’ Attribute
- Responsive Video: How to Keep Your Videos Mobile and Tablet Friendly
If you are looking to ramp-up the potential of video in 2022 then you are definitely in the right place!
Let’s get started, but first:
What is the HTML Video Element?
The `video` element was first proposed by Opera in 2007 and was later added to the HTML5 specification. Prior to that, if you wanted to add video to an HTML page, you had to use Adobe Flash.
There were a few problems with that: Flash has a long history of security flaws, is CPU intensive, and isn’t supported on Android or iOS.
Clearly, we needed an alternative that was lightweight, natively supported across the web, and worked seamlessly on mobile devices. Enter the `<video>` element.
In this guide we’ll show you how to use it.
You’ll learn about both basic and advanced use cases of the `video` element, how to ensure that your videos play across browsers by providing multiple video sources, how to keep your videos accessible by including caption/subtitles using WebVTT and also how to make sure that your videos remain responsive.
What Is the HTML5 Video Tag?
The `<video>` element is simply a tag used to embed video content in an HTML document. As of 2022 it is excellently supported across all modern browsers (both mobile and desktop), except for Opera Mini.
How does HTML5 video work?
To add video to your page using the `<video>` element, use the code shown in this image:
Let’s break that down:
`controls`
This specifies that video controls such as Play, Pause, Volume, etc. should be displayed, allowing user control of video playback.
`src`
Specifies the location or path to the video media file you want to embed.
`type`
This defines the MIME type or format of the video file, helping the browser determine beforehand whether it can decode the file. This leads to faster download and rendering.
`<p>`
The text in this tag serves as fallback content that will display if the user’s browser doesn’t support the `video` element or the format of the embedded video.
This example depicts the basic use of the `<video>` tag.
It’s good but not good enough.
Problems with the HTML5 Video Tag
The problem is that different browsers don’t support the same media formats in their implementations of the HTML5 `<video>`, mainly because of patent issues.
This means that the MP4 format may not be supported by the user’s current browser. As a matter of fact, MP4 currently has poor support in Firefox for Android.
Here’s a browser support table for MP4 Video Format:
Cross-browser HTML5 Video Tag Compatibility
So how do you make sure your video is playable across all browsers on all platforms?
There are currently three video formats supported by the HTML5 specification:
– WebM
– Ogg
– MP4
Different browsers support a combination of all or some of the three formats due to varying reasons, one being patent laws.
To ensure video compatibility across browsers, HTML5 provides the `<source>` tag, which you can use to provide alternative video sources of different formats.
Here’s an example of the code we use to do this:
This way, each browser can select the format best suited for it from the options provided and serve it.
Converting HTML5 Video
There are a number of HTML video converters you can use to convert videos from one format to another, but you might be wondering:
“Does this mean I have to convert all my videos into three different formats every time?”
In my opinion, including all three formats is unnecessary. I’d suggest going with MP4 and WebM. MP4 has the largest browser support and browsers that don’t have great support for it fully support WebM. I suggest WebM over Ogg because it’s high quality, open-source, and has smaller file sizes, making it very performant for mobile devices.
HTML5 Video Attributes
Beyond cross-browser compatibility, the HTML5 `<video>` is capable of even more when combined with a couple of native attributes.
Let’s look at some of them:
`width` and `height`
Define width and height in pixels to prevent flicker and page shift before the browser loads the video.
`loop`
Dictates that the video should repeat play once it reaches the end.
`muted`
Indicates that the video should be muted on load. The user can then decide to unmute it or not.
`autoplay`
Indicates that the video should start playing as soon as it’s loaded.
`poster`
Provides the URL of an image that can be used as a splash screen or thumbnail before the video is played. Note that if you’re going to specify a poster image, then there’s no need to include the `autoplay` attribute because it overrides the `poster` attribute.
`duration`
Returns the length of the video in seconds. You can use JavaScript to manipulate and display this info in any format of your choice.
`playsinline`
States that the browser should play the video right where it is instead of opening up an overlay screen, which is the default behavior on mobile browsers.
`preload`
Tells a browser to preload the video for faster playback. Note that the preload property is ignored if `autoplay` is present. Possible values are:
`metadata`
Tells the browser that the user is not expected to need the video, but suggests that fetching its metadata (dimensions, track list, duration, and so on) is desirable. This is the default value in Chrome.
`auto`
Tells the browser to load the entire video.
`none`
No preload.
`autoPictureinPicture`
Reflects the HTML attribute indicating whether the video enters picture-in-picture mode automatically when the user switches from one document to another.
How to Improve Video Accessibility
Let’s look at how to make sure that videos embedded on a web page remain accessible to a variety of audiences.
”The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect.” – Tim Berners-Lee
Plain video content on its own is not accessible enough for users who may have hearing or cognitive disabilities or even users who may be in temporarily unfavorable situations—a noisy environment, for example or a mandatory quiet place like a library.
Accessibility can be improved for such users by providing timed text tracks, like captions, subtitles, or descriptions, alongside the video.
The technology for achieving this on the web is known as Web Video Text Tracks Format, or WebVTT. It’s a format for displaying timed text tracks alongside video using the HTML`<track/>` element.
Here’s an image of a typical WebVTT file:
Note: The time range must be in either _hh:mm:ss:ttt_ or _mm:ss:tt_, where _hh_ is hours and must be up to two digits, _mm_ is minutes (0–59), _ss_ is seconds (0–59), _ttt_ is milliseconds (0–999).
You can create your WebVTT files either manually or automatically, using a speech recognition tool.
Once you’ve created this file, you can embed it into the HTML video using the `<track>` element like so:
The Elements of the ‘<track>’ Attribute
Here we explain what each attribute in the `<track>` element does:
`default`
Indicates that the track should be enabled automatically when the video starts playing.
`srclang`
States the language the track is in.
`kind`
Specifies the kind of text track provided. Possible values are:
`subtitles`
Overlays written translations of dialogue and other video content (eg, text or images) onto the video. Usually intended for hearing people who do not understand the original language used in the audio.
`captions`
Overlays transcription of audio onto the video. Different from subtitles in that captions are usually in the same language as the audio and are more descriptive, sometimes displaying nonverbal cues like sound effects or the name of the current speaker. Intended for people with hearing disabilities, watching in a noisy place or with the audio muted.
`descriptions`
Overlays a full audio description of all video content onto the video, from dialogue to action to sound effects to cues. Intended for people who are blind or can’t see the video.
`chapters`
Includes titles for different portions (eg, sections or episodes) of the video content. Chapters are sometimes displayed as an interactive list on the browser interface so viewers can navigate to different sections of the video easily.
`src`
States the URL of the text track file.
`label`
Defines the title of the text track. For subtitles, it should indicate which language a subtitle set is for, for example German or French. Labels will appear in the user interface to allow users to easily select which subtitle language they want to see.
Here’s an example of an HTML5 video with captions, featuring developer Gift Egwuenu
Responsive Video: How to Keep Your Videos Mobile and Tablet Friendly
You’ve seen the `width` and `height` attributes of the HTML5 video element and how they can be used to set static dimensions for the video.
But here’s the thing:
Declaring static widths isn’t a good idea when it comes to responsiveness.
What happens when the parent container for that video shrinks narrower than the declared width?
The video will probably overflow the screen, making it impossible to watch.
For example, the video in the image below is set to a static width of 600px. When accessed via a mobile device of 350px, it overflows the viewport.
Here is an example of an unresponsive video on mobile
To make a `<video>` element responsive, instead of defining static dimensions using its `width` and `height` attributes, give it fluid dimensions using CSS.
Here’s an image of a CSS responsive video element:
Here we have given the video a height of `auto` to ensure that the original aspect ratio of the video content is maintained across screens.
This image shows the same video as in the previous image with responsive styles applied.
Notice how it now fits nicely on the screen.
If you’ll like the video to be contained within a section, you can simply wrap the `<video>` element in a `<div>` and define dimensions for the `<div>`.
The video will now scale in proportion to its parent element.
Conclusion
In this post, you learned how to embed a video on an HTML page using the `<video>` element, as well as several attributes you could include to enhance user experience.
You also learned about video accessibility and responsiveness.
If you’re going to be working with multiple videos, you should consider using an existing HTML-compatible video player to seamlessly manage and embed videos.
These video players will automatically provide you with an embed code that you can copy and paste into your HTML page to display the videos.
You can then use the attributes we’ve covered in this article to expand on the capabilities of the embed codes.
Check out our advanced HTML5-compatible video player with support for ads, DRM, multiple codecs, and smart TVs.
We hope you found this guide useful! If you did, please don’t be afraid to share it on your social networks!
Did you know?
Bitmovin has a range of VOD services that can help you deliver content to your customers effectively.
Its variety of features allows you to create content tailored to your specific audience, without the stress of setting everything up yourself. Built-in analytics also help you make technical decisions to deliver the optimal user experience.
Why not try Bitmovin for Free and see what it can do for you.
