In previous posts we've looked at the theory behind the different formats and codecs you can use for your videos and how to encode video for use on the web.
This post will cover the HTML necessary to embed a set of (theoretical) videos that we encoded for the project.
The basic <video> element embeds and plays video a single version of the video.
It also provides attributes that will dictate what elements of the player the users will see and the dimensions of the player.
The attributes are:
controls
Wether the browser shows default controls (play, pause, seek) for the video
playsinline
whether a mobile browser should play the video embedded on the page or play it full screen (the default)
autoplay
Whether the video will start playing as soon as the page loads
poster
Path to an image that will be used as a placeholder before
width, height
The dimensions for the player
This will prevent content from shifting around the page
src
URL or path to the local path to the file
We also provide textual content in case the browser can't play the video.
<videocontrolsplaysinlineautoplay='false'poster="path/to/poster/image"width="250"src="path/to/video.mp4"><p>Your browser doesn't support the video tag or doesn't support the format the video is encoded in</p><p>Download the <ahref="path/to/video.mp4">MP4 Version</a></video>
Rather than provide a single element in the src attribute of the <video> element, we can provide one or more versions of the video in separate source child elements.
<videocontrolsplaysinlineautoplay='false'poster="path/to/poster/image"width="250"><sourcesrc="video/video-av1.mp4"type="video/mp4"/><sourcesrc="video/video-vp9.webm"type="video/webm"/><sourcesrc="video/video-mp4.mp4"type="video/mp4"/><sourcesrc="video/video-ogg.webm"type="video/webm"/><p>Your browser doesn't suport the video tag or doesn't support for format the video is encoded in</p><p>Download the <ahref="path/to/video.mp4">MP4 Version</a></video>
There's an additional section of the type attribute worth discussing: The codecs parameter.
This parameter lets some video types give the browser more information to decide if the video can be played or not.
This is important because, without this parameter, the browser will have to download at least part of the video before deciding if it can play it or not.
The values for the codecs parameter will depend on the codec you're using and can get fairly complicated.
We'll look at some of these values and how to get them, but it's not intended to be a complete overview. If you want more information check The codecs parameter in common media types
Finding the values for the codecs string inside the type
In the case of avc1.4D401E, avc1 indicates H.264 video, and this is followed by a dot and three 2-digit hexadecimal numbers defined by the H.264 standard:
Take the 8-digit binary number (the second from the right) and convert it to hexadecimal. In the previous example the hexadecimal value of profile_idc is 64
The hexadecimal representation for constraint_set is 00.
Building the codecs string for AV1 video is the most complex so far. As outlined in Getting the correct HTML codecs parameter for an AV1 video this will also have to grab the headers for the video using FFMPEG and follow the instructions in Jake's article to construct the codecs string.
So now that we have the values for the codecs string, we can add it to the type attribute, like so:
<videocontrolsplaysinlineautoplay='false'poster="path/to/poster/image"width="250"><sourcesrc="video/video-av1.mp4"type="video/mp4"/><sourcesrc="video/video-vp9.webm"type="video/webm;codecs=vp9,opus"/><sourcesrc="video/video-mp4.mp4"type="video/mp4,codec=avc1.4D401E,m4a.40.2"/><sourcesrc="video/video-ogg.ogg"type="video/ogg"/><p>Your browser doesn't support the video tag or doesn't support for format the video is encoded in</p><p>Download the <ahref="path/to/video.mp4">MP4 Version</a></video>
The order of the source elements matter. The browser will play the first format that it supports so you must put your preferred format first and then list the fallbacks in order of preference.
In the previous example. If the browser can play AV1 video in an MP4 container, it will use it and stop the search. Same thing with the second and subsequent fallbacks.
There are five types of tracks available for video elements. For accessibility purposes, the two types of tracks we're interested in are captions and subtitles
Captions and subtitles are not the same thing and should not be used interchangeably.
Subtitles provide translation of content that cannot be understood by the viewer. They may also contain additional content, usually extra background information
Closed captions provide transcription and possibly a translation of audio. They may include important non-verbal information such as music cues or sound effects.
Captions are primarily used to provide additional information for deaf users or when the audio is off.