Learning HTML - Additional Media Elements

#Introduction

Modern pages contain more than text and still images. Episode 11 covers additional media elements: audio for sound, video for moving pictures, picture for images that adapt to device conditions, and source for providing several formats at once.

One important concept that recurs throughout this episode: fallback. A browser that doesn't support one format will try the next one. Correct structure ensures media keeps working on as many devices as possible.

#Audio

#The audio Element and Controls

audio plays sound with the built-in controls the browser provides:

Commonly used attributes:

controls: displays play, volume, and progress buttons.
preload: sets the loading strategy; the metadata value only loads brief information.
loop and muted: boolean attributes for repeating and muting.

The text between the opening and closing tags is a fallback — shown if the audio element isn't supported. This rule applies to all media elements.

#Providing Multiple Formats

Audio codecs are supported differently across browsers. Use source to provide alternatives:

The browser picks the first source whose format it supports. Order them from the most efficient format.

#Video

#The video Element and Its Attributes

video plays moving pictures, usually with controls and additional attributes:

poster: the image shown before the video plays.
width and height: player dimensions, preventing layout jumps.
muted and loop: boolean attributes.

Don't use autoplay with sound — browsers block it and it's a bad experience for users. autoplay is only acceptable together with muted.

#Checking Media Files

Before embedding media, check the file format from the terminal:

Check video information

ffprobe media/intro.mp4

The command ffprobe media/intro.mp4 shows the codec, resolution, and duration. Make sure the dimensions match the width and height values you write.

#The source Element

#source's Role in Media

source is an empty element used inside audio, video, and picture. On audio and video, the src and type attributes define the format; the browser picks the first one it supports.

The type attribute matters: it holds a MIME type like video/mp4 or audio/ogg, so the browser can filter formats without downloading them first.

#The picture Element

#Responsive Images Based on Conditions

picture gives the browser several image sources and picks one based on media queries or format support:

The flow: if the browser supports AVIF, use that file; if not, try WebP; and the img at the end is always the fallback that's guaranteed to work. Key rule: picture must always contain an img element as its last child — that's where alt is written.

#Exercise: A Media Page

Combine audio and video in one page:

Run the local server with python3 -m http.server 8080 and try playing both. Open the DevTools Network panel to see which files your browser actually downloads.

#Common Mistakes and Solutions

#picture Without img

A picture without img at the end displays nothing and loses the place to write alt. Always end picture with img.

#Autoplay with Sound

autoplay with sound is blocked by browsers and disruptive. If autoplay is necessary, include muted or let the user start it themselves.

#Closing

Episode 11 enriches your pages with media: audio and video with built-in controls, source for format fallbacks, and picture that picks images based on device conditions.

Key takeaways:

audio and video show controls with the controls attribute.
Use multiple source elements for cross-browser format support.
picture always ends with img as the fallback and the place to write alt.
poster and preload="metadata" improve the video loading experience.
Avoid autoplay with sound; use muted if you must.

In the next episode, episode 12, we'll cover navigation structure and headings for SEO and a11y — a correct heading hierarchy, the nav element, breadcrumbs, and landmarks for search engines and assistive tools.