This post is base on Video and audio content on MDN.
In the early days, HTML didn’t have the ability to embed video and audio on the Web, so Flash become popular for handling such content, it worked ok but has a number of problems, including not working well with HTML/CSS features, security issues, and accessibility issues.
HTML5 specification introduced the
An example to embed a video into your webpage using the
<video src="video.mp4" controls>
Different browsers support different video and audio formats, we can do something to prevent this from being a problem.
Some terminologies first:
Formats like MP3, MP4 and WebM are called container formats. They define a structure in which each the audio and video tracks that make up the media are stored, along with metedata describing the media, what codecs are used to encode its tracks, and so forth.
The audio and video tracks in the structure (or container) hold data in the appropriate format for the codec to encode the media. As we talked before, different browsers support different video and audio formats, different containers contain different video and audio formats, so different browsers support different containers (or formats like MP3, MP4 and WebM).
- A WebM container typically packages Vorbis or Opus audio with VP8/VP9 video. This is supported in all modern browsers.
- An MP4 container often packages AAC or MP3 audio with H.264 video. This is also supported in all modern browsers, as well as Internet Explorer.
- The Ogg container tends to use Vorbis audio and Theora video. This is best supported in Firefox and Chrome, but has basically been superseded by the better quality WebM format.
The codecs described above exist to compress video and audio into manageable files, since raw audio and video are both exceedingly large.
Things become more complicated because not only does each browser support a different set of container formats, they also each support a different selection of codecs. In order to maximize the likelihood that your website will work on a user’s browser, you may need to provide each media file you use in multiple formats. If your site and the user’s browser don’t share a media format in common, your media simply won’t play.
Some guides when choosing formats and codecs to reference on MDN:
To solve these problems in code, we take the
src attribute out of the
<video> tag and includs seperate
The browser will go through the
<source> and play the first one that it has the codec to support. If
type attribute is not used, browsers will try to play it until they find the playable one. If
type is used, browsers can simply judge by the
heightcan be used to change the video’s size, the video will keep the aspect ratio whether these values maintain the aspect ratio, some extra top and bootom padding will be added to make it satisfy the
mutedturns off the sound by default.
posterspecifies the cover image.
preloadis used for buffering large files, can be set to.
nonedoesn’t buffer the file.
autobuffers the media file.
metadatabuffers only the metadata for the media file.
<audio> element and the
<video> element works very similar, with a few difference that
poster attributes are not supported since there is no visual component in the
The most exciting part comes! Text tracks can not only help people who don’t or can’t hear the audio, but also help you with SEO, since search engine always make use of texts, they even allow search engine to link directly to certain time of your media! To add subtitles/captions to you video or audio, we use the WebVTT (Web Video Text Tracks) format file and the
Before exploring the WebVTT file, let’s see the difference between subtitles and captions.
- subtitles are translations of foreign material, for people who don’t understand the words spoken in the audio.
- captions are synchronized transcriptions of dialog or descriptions of significant sounds, to let people who can’t hear the audio understand what is going on.
A typical WebVTT file looks like this:
To get this displayed with the HTML media, you need to:
- save it as a
- link the file to the
<track>should be placed within the
<video>element, but after all
<source>elements, use the
kindattribute to specify whether the file is
captions, further, use the
srclangattribute to tell the browser the language written in the WebVTT file.
load() to restart the media: