Audio and video

Media built into the browser

Before HTML5, playing a video on a web page needed a plug-in. Today the browser has a player built in, and you add it with two elements: audio and video.

<video src="cooking-demo.mp4" controls width="640" height="360"></video>

<audio src="podcast-episode-12.mp3" controls></audio>

The controls attribute shows the browser's own player: play and pause, a progress bar, volume and, for video, full screen. Without it, the media is there but the visitor has no way to start it, which is almost never what you want.

Each browser draws the controls slightly differently. That is normal; they also work with the keyboard and screen readers out of the box, which is hard to achieve with a custom player.

Offering more than one format

Not every browser plays every file type. You can list several source elements and the browser uses the first one it can play:

<video controls width="640" height="360" poster="cooking-demo-poster.jpg">
  <source src="cooking-demo.webm" type="video/webm">
  <source src="cooking-demo.mp4" type="video/mp4">
  <p>Your browser cannot play this video. <a href="cooking-demo.mp4">Download the video</a> instead.</p>
</video>

• MP4 (H.264 video, AAC audio) plays in practically every browser, so it is the safe choice if you only make one file.
• WebM files are often smaller; list them first so browsers that support them use them.
• For audio, MP3 is the universally supported choice; AAC (.m4a) and Opus (.ogg or .webm) are good alternatives.

The text inside the element is shown only by browsers that cannot play media at all. A download link is a helpful fallback.

Captions with track

Captions make videos usable by deaf and hard-of-hearing viewers, by people in noisy places, and by the many people who watch with the sound off. They also help viewers whose first language is different from the speaker's.

<video controls width="640" height="360">
  <source src="lesson-1.mp4" type="video/mp4">
  <track kind="captions" src="lesson-1.en.vtt" srclang="en" label="English" default>
  <track kind="captions" src="lesson-1.hi.vtt" srclang="hi" label="हिन्दी">
</video>

Captions live in a WebVTT file (.vtt), a simple text format with timings:

WEBVTT

00:00:01.000 --> 00:00:04.000
Welcome to the first lesson.

00:00:04.500 --> 00:00:08.000
Today we will build a web page from scratch.

default turns that track on automatically, and the player shows a captions button for the rest. Caption files often come as .srt; converting them to .vtt is mostly a matter of adding the WEBVTT header and changing commas in the timings to full stops.

Autoplay, muted and loop

<video autoplay muted loop playsinline width="640" height="360" src="background-waves.mp4"></video>

Browsers block autoplay with sound, because unexpected noise drives visitors away. If you need a video to start on its own, such as a silent background clip, it must also be muted. loop restarts it at the end, and playsinline stops iPhones from jumping to full screen.

Use autoplay sparingly. Moving video distracts from reading, uses mobile data, and should always be easy to pause. For anything with speech, let the visitor press play.

preload and poster

• preload="none": download nothing until the user presses play. Best for pages with many videos.
• preload="metadata": fetch only the duration and size. A good default.
• preload="auto": the browser may download the whole file in advance.
• poster="image.jpg": the image shown before playback starts. Without it, browsers show the first frame or a blank box.

Always give a video width and height (or size it with CSS) so the page does not jump when the player appears.

Hosting your own files or a video platform

Video files are large. Serving many plays from ordinary web hosting can use up your bandwidth quickly, and you have to make several formats and sizes yourself. That is why most sites upload videos to a video platform and embed its player with an iframe, which is the topic of a later lesson. Self-hosted video is perfect for short clips, product animations and intranet sites.

Common mistakes

• No controls, so the video cannot be started.
• Autoplay with sound, which browsers block anyway.
• Only a WebM file, which some devices, especially older iPhones, could not play.
• No captions on videos with speech.
• Huge files with preload="auto" on a page full of videos.

Exercise

Write the HTML for a lesson video with: built-in controls; a WebM and an MP4 source; a poster image; English captions turned on by default; a fallback download link; and nothing downloaded until the visitor presses play.

<video controls preload="none" poster="intro-poster.jpg" width="960" height="540">
  <source src="intro.webm" type="video/webm">
  <source src="intro.mp4" type="video/mp4">
  <track kind="captions" src="intro.en.vtt" srclang="en" label="English" default>
  <p><a href="intro.mp4">Download the introduction video (MP4)</a></p>
</video>