HTML5 Video and Audio

First Principle: The Web is More Than Text and Images

A webpage should deliver any kind of content, not just text and images. Before HTML5, video and audio required third-party plugins like Flash, QuickTime, or Silverlight. This was inefficient, insecure, and inconsistent.

The Core Problem

How can we embed video and audio in a standardized, native, plugin-free way that works on every modern browser across devices?

The Logical Solution

HTML5 introduced the <video> and <audio> tags to embed and control media without plugins.

Part 1: The Basics - Getting a Video on the Page

The <video> tag is used to display video content.

<video src="my-awesome-video.mp4"></video>

By default, this only shows the first frame. To enable controls like play, pause, and volume, we add the controls attribute.

<video src="my-awesome-video.mp4" controls></video>

✅ Result: A functional video player with built-in browser controls (play/pause, timeline, volume, fullscreen).

Part 2: Intermediate - Controlling Behavior with Attributes

controls: Shows player controls.
autoplay: Starts playing automatically (often requires muted).
muted: Mutes the video sound by default.
loop: Restarts video automatically when it ends.
poster: Shows a thumbnail before video starts.
width / height: Sets player dimensions, like images.

<video src="video.mp4" autoplay muted controls></video>

<video src="video.mp4" poster="images/video-thumbnail.jpg" controls></video>

Part 3: The <audio> Tag

The <audio> tag works the same way, but only for sound files like MP3, OGG, or WAV.

<audio src="song.mp3" controls></audio>

Quick Reference Table

Tag/Attribute	Description
<video>	Embeds a video file
<audio>	Embeds an audio file
controls	Displays built-in player controls
autoplay	Automatically starts playback (muted required in most browsers)
muted	Starts playback with sound off
loop	Restarts playback when media ends
poster	Thumbnail image before video starts
width / height	Sets player size in pixels
src	Path to the media file
<source>	Allows multiple file formats for better browser support

HTML5 Video and Audio

Part 1: Basics - Getting a Video on the Page

The <video> tag is used to embed video content. By default, it only shows the first frame, not a player.

<video src="my-awesome-video.mp4"></video>

To enable play/pause and volume, we add the controls attribute.

<video src="my-awesome-video.mp4" controls></video>

Part 2: Controlling Behavior with Attributes

controls: Shows player UI.
autoplay: Starts playing automatically (usually requires muted).
muted: Starts video without sound.
loop: Restarts video automatically after ending.
poster: Thumbnail image before video starts.
width/height: Sets player size in pixels.

<video src="video.mp4" autoplay muted controls></video>

<video src="video.mp4" poster="images/video-thumbnail.jpg" controls></video>

Part 3: The <audio> Tag

The <audio> tag works like <video>, but only for sound files such as MP3, OGG, or WAV.

<p>Listen to our theme song:</p>
<audio src="audio/theme-song.mp3" controls></audio>

✅ Result: A clean audio player with play/pause, timeline, and volume.

Part 4: Advanced & Professional

Problem #1: Browser Compatibility

Not all browsers support the same formats. To solve this, use multiple <source> elements inside <video> or <audio>.

<video controls poster="images/thumbnail.jpg">
  <source src="videos/my-video.webm" type="video/webm">
  <source src="videos/my-video.mp4" type="video/mp4">
  Sorry, your browser doesn't support embedded videos.
</video>

Problem #2: Accessibility with Captions & Subtitles

Use the <track> element to add captions or subtitles from a WebVTT (.vtt) file.

<video controls>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">

  <!-- English Captions -->
  <track src="captions_en.vtt" kind="captions" srclang="en" label="English">

  <!-- Spanish Subtitles -->
  <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Español">
</video>

Breakdown of <track> attributes:

src: Path to the .vtt file.
kind: Type of track:
- captions – transcription for hearing impaired
- subtitles – translation into another language
- descriptions – audio description for visually impaired
srclang: Language code (e.g., "en" for English).
label: Name shown in the captions menu.

Reference Table

Tag/Attribute	Description
<video>	Embeds a video file
<audio>	Embeds an audio file
controls	Shows built-in player controls
autoplay	Starts playing automatically (with muted)
muted	Starts without sound
loop	Repeats media after ending
poster	Thumbnail before video starts
width / height	Sets player size
src	Path to media file
<source>	Specifies alternative media formats for compatibility
<track>	Adds subtitles, captions, or descriptions from a .vtt file
kind	Type of text track (captions, subtitles, descriptions)
srclang	Language of the text track
label	Visible name for the track

Video & Copyright Examples

Example 1: Robust & Professional Method (with <source>)

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Example 2: Simple & Direct Method (with src)

<video src="a.mp4" controls></video>

Example 3: Copyright Symbol (Entity Name)

<footer>
  <p>Copyright &copy; 2024 My Awesome Website. All Rights Reserved.</p>
</footer>

Example 4: Copyright Symbol (Entity Number)

<footer>
  <p>Copyright &#169; 2024 My Awesome Website. All Rights Reserved.</p>
</footer>

📑 Attribute & Tag Reference Table

Tag / Attribute	Purpose
<video>	Embeds a video player in the webpage.
src	Directly specifies the video file to play.
<source>	Provides multiple video file formats for compatibility.
type	Defines the MIME type of the media file.
controls	Adds play, pause, volume, and fullscreen buttons.
width / height	Sets the size of the video player.
poster	Displays an image placeholder before the video plays.
autoplay	Plays the video automatically when the page loads.
loop	Repeats the video indefinitely.
muted	Starts video without sound.
Fallback Text	Message shown if browser doesn’t support <video>.
©	HTML entity name for copyright symbol (©).
©	HTML entity number for copyright symbol (©).