Remember when the HTML5 video tag didn’t exist? Maybe not, actually. 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 post, I’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 Element and What Is it Used For?
The `<video>` element is simply a tag used to embed video content in an HTML document.
According to Can I Use stats, the `<video>` element is excellently supported across all modern browsers (both mobile and desktop), except for Opera Mini.
To add video to your page using the `<video>` element, the following code would suffice:
Let me break that down:
– `controls`: 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`: 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>`: 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 `<video>`, which is good but not good enough.
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 video 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.
So how do you make sure your video is playable across all browsers on all platforms?
How to Implement Cross-browser HTML5 Video Tag Compatibility
There are currently three video formats supported by the HTML5 specification:
As I mentioned earlier, 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. This way, each browser can select the format best suited for it from the options provided and serve it.
Fortunately, 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.
Other HTML5 Video Attributes You Should Know
Beyond cross-browser compatibility, the HTML5 `<video>` is capable of even more when combined with a couple of native attributes. Let’s take a 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.
– `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.
Now, let’s look at how to make sure that videos embedded on a web page remain accessible to a variety of audiences.
How to Improve Accessibility for Videos
”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 unfavourable 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 what a typical WebVTT file looks like:
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:
Let me 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.
How to Keep Videos Responsive to Screen Width
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 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 and look ridiculous, if not be 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.
To make a `<video>` element responsive, instead of defining static dimensions using its `width` and `height` attributes, give it fluid dimensions using CSS:
The video is given a height of `auto` to ensure that the original aspect ratio of the video content is maintained across screens.
The image below shows the same video as in the previous image with responsive styles applied. Notice how it 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.
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.
For an advanced HTML5-compatible video player with support for ads, DRM, multiple codecs, and smart TVs, check out Bitmovin.