Advanced Media: Video and Audio.

Modern HTML5 allows you to embed video and audio directly into your web pages without needing external plugins like Flash.

The Essentials

The <video> and <audio> tags are used for multimedia.

The 'controls' attribute adds the play/pause and volume buttons.

The <source> tag is used to provide multiple file formats for compatibility.

Common formats: MP4 and WebM for video; MP3 and OGG for audio.

The 'autoplay' attribute starts media immediately (often blocked by browsers).

The 'loop' attribute makes the media repeat continuously.

Professional Insights

Fallback Content

Always include text inside the <video> or <audio> tags for older browsers that don't support HTML5 media. They will display the text instead of the broken player.

The 'muted' Attribute and Autoplay

Modern browsers (like Chrome) will only allow 'autoplay' if the 'muted' attribute is also present. This prevents annoying loud audio when a page loads.

Poster Images

The 'poster' attribute for <video> allows you to show a custom image before the video starts playing. This is better for performance and UX than a black screen.

Accessibility: Captions and Subtitles

The <track> tag is used to add subtitles, captions, or descriptions for users who are deaf or hard of hearing. This is a critical requirement for accessible media.

Critical Pitfalls

Forgetting the 'controls' attribute, which leaves the user with no way to play the media.

Using only one file format—some browsers might not support it (always provide MP4/MP3 as a baseline).

Not providing 'alt' text or fallback content inside the tag.

Auto-playing loud music, which is the #1 reason users leave a website immediately.

Interactive Lab

Sprint Tasks

Add a video tag with the 'controls' attribute

Add a source with src='movie.mp4' and type='video/mp4'

Add a fallback message: 'Your browser does not support video.'

Loading editor...

Production Preview