Audio, video and embedded pages

Introduction

Not so long ago, playing a video in a browser needed a plugin. Today it takes one element. The work that remains is making media useful to everyone, including people who cannot hear it, and making sure that what you embed cannot harm your visitors.

How it works

Video and audio. video and audio work the same way. src names the file, and the controls attribute shows the player. Leave it off and there is nothing to press. Other attributes are width and height, which reserve space, poster, an image to display before playing, muted, loop and preload.

Most browsers block autoplay with sound, because it annoys people, so autoplay generally only works with muted.

Different formats. Files are compressed by a codec, and browsers do not all support the same ones. Use several source elements inside the video, and the browser plays the first one that it can. MP4 with H.264 plays nearly everywhere. Any text inside the element is shown only by browsers that cannot play it at all.

Captions. The track element connects a captions file, written in a simple text format called WebVTT. Deaf viewers need captions, and many other people watch with no sound. kind="captions" also describes important sounds, not just speech. srclang gives the language and label gives its name in the menu.

Embedding pages. iframe shows another page inside yours: a map, a video player, a payment form. Always give it a title, because a screen reader announces it. Set a size, and add loading="lazy" for frames far down the page.

Safety. The page inside a frame is someone else's code. The sandbox attribute removes almost every ability from it, and you add back only what is needed: sandbox="allow-scripts" lets it run scripts, but it still cannot navigate your page. This site uses exactly this approach to run the code you write in these lessons. Do not combine allow-scripts and allow-same-origin for a page from your own site, because the page can then remove its own sandbox.

The reverse problem also exists. Many sites refuse to be framed, to stop attackers from placing invisible frames over buttons, a trick called clickjacking. If an iframe shows up blank, that is usually why.

Syntax

<video controls width="640" height="360" poster="cover.jpg">
  <source src="talk.mp4" type="video/mp4">
  <track kind="captions" src="talk.en.vtt" srclang="en" label="English">
  Your browser cannot play this video. <a href="talk.mp4">Download it</a>.
</video>

Example

This example shows an iframe, because that needs no media file. The page inside is written with srcdoc.

Line by line

1. title tells a screen reader what the frame contains.
2. width and height set its size.
3. sandbox with no value removes all abilities: no scripts, no forms, no navigating away.
4. srcdoc provides the inner page directly. Usually you would use src with an address.

Expected result

A paragraph, and below it a bordered box containing the text "Hello from inside" as its own small page.

In the real world

Video sites embed with iframes, and online shops take payments in frames so that card details never touch the shop's own page. Streaming services use more advanced techniques for adaptive quality, but the video element is still doing the playing.

Common mistakes

• Forgetting controls, so that the video cannot be played.
• Omitting captions, which excludes deaf and hard-of-hearing visitors.
• Omitting the title of an iframe.
• Using autoplay with sound and assuming that it will work.

Best practices

• Provide captions for speech, and a transcript for audio.
• Reserve space with width and height.
• Only embed sources that you trust, and sandbox the others.
• Host large videos on a dedicated service: they are very expensive to serve yourself.

Summary

video and audio need controls, and source elements provide fallbacks. track adds captions. iframe embeds a page and needs a title, while sandbox restricts what it can do.

Mark lesson complete