HTML & CSS Course
HTML & CSS
/
Beginner

Audio & Video

Definition

HTML5 introduced native `<audio>` and `<video>` elements to embed media files without needing third-party plugins like Flash.

Explain Like I'm New

Before HTML5, playing a video required clunky, insecure plugins. Now, you just use the `<video>` tag, point the `src` to an MP4 file, and add the `controls` attribute. The browser handles everything else.

Real World Example

The standard video player on most modern websites that aren't using a complex custom player (like YouTube does).

Common Use Cases

  • •Embedding background videos
  • •Creating podcast players
  • •Self-hosting media

Interactive Example

Interview Questions

basic

  • What attribute adds the play/pause button to a video element?

intermediate

  • Why should you provide multiple `<source>` tags for a single video?

Flash Cards

Question

What attribute?

Click to reveal answer
Answer

The `controls` attribute.

Question

Why multiple sources?

Click to reveal answer
Answer

Different browsers support different video formats. By providing an MP4 and a WebM version, the browser will automatically pick the first one it knows how to play.