HTML Media Tutorial

First Principle: The Web is More Than Text and Images

The fundamental truth is that a webpage should be able to deliver any kind of content, not just static text and pictures. For years, this was a major problem. To play a video or audio file, browsers had to rely on third-party plugins like Adobe Flash, QuickTime, or Silverlight. This was inefficient, insecure, and inconsistent across different computers.

The Core Problem

How can we embed video and audio into a webpage in a standardized, native, and plugin-free way? We need a universal system that works on every modern browser, from a desktop PC to a mobile phone, without requiring the user to install anything extra.

The Logical Solution

The solution was to create dedicated HTML tags whose sole purpose is to embed and control media: the <video> and <audio> tags.

The Most Basic Implementation

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

The Problem: If you put this on a page, you'll just see the first frame of the video as a static image. You can't play it, pause it, or change the volume. It's not a video player; it's just a video frame.

The Solution: The controls Attribute

The controls attribute is a boolean attribute. You don't need to set it to a value; its mere presence turns the feature on.

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

Result: You now have a fully functional video player on your page, complete with a play/pause button, a timeline scrubber, volume controls, and a fullscreen option. This is the simplest, most effective way to embed a video.

Image: Video player with controls

Controlling Video Behavior and Appearance

width and height

Just like with an <img> tag, you can set the dimensions of the player.

<video src="video.mp4" width="640" height="360" controls></video>

autoplay

This attribute will make the video start playing as soon as the page loads.

CRITICAL CAVEAT: Modern browsers will block autoplay with sound because it's a terrible user experience. To make autoplay work, you almost always have to add the muted attribute as well.

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

loop

Makes the video automatically restart from the beginning when it finishes. Great for background videos.

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

poster

This is a fantastic feature for user experience. It specifies an image to display before the video is played, just like a YouTube thumbnail.

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

Image: Video with poster image

The <audio> Tag

The <audio> tag works almost identically to the <video> tag, just without the visual component.

The Problem

How do we embed a sound file (like a song or a podcast) with player controls?

The Solution

Use the <audio> tag with the controls attribute.

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

Result: A clean audio player with play/pause, a timeline, and volume controls. It uses the same attributes like autoplay, loop, and muted.

Image: Audio player with controls

Problem: Not all browsers support the same video formats.

Chrome might prefer the modern .webm format, while Safari on an iPhone might only support .mp4. If you only provide one src, some of your users won't be able to see your video.

Solution: The <source> Element

Instead of putting the src on the <video> tag itself, you can provide multiple formats inside the tag using the <source> element. The browser will go down the list and play the first one it supports.

<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>
                

This is the robust, professional way to embed media. The type attribute tells the browser what kind of file it is so it doesn't have to waste time downloading a file it can't play.

Common Video Formats

• .mp4 (H.264 codec): This is the most widely supported format today. Almost all modern browsers can play it.
• .webm (VP8/VP9 codec): This is an open-source format heavily promoted by Google. It has excellent support in Chrome and Firefox.
• .ogg (Theora codec): This was an older open-source alternative, more popular before .webm took over.

Image: Browser compatibility chart

Problem: Your video is not accessible.

Users who are deaf or hard of hearing can't understand your video. Users in a noisy environment (or a quiet office) can't listen to the audio. Users speaking another language won't understand it.

Solution: The <track> Element

The <track> element allows you to add timed text tracks, such as subtitles or captions. It's a self-closing tag that points to a special text file, usually in WebVTT (.vtt) format.

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

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

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

Track Attributes

• src: Path to the .vtt file.
• kind: The type of track. The most common are:
  • captions: A direct transcription of the dialogue and important sounds, for users who can't hear the audio.
  • subtitles: A translation of the dialogue into another language.
  • descriptions: A separate audio description for visually impaired users.
• srclang: The language of the track file (e.g., "en" for English).
• label: The name that appears in the video player's captions menu.

This makes your video accessible to a much wider audience and is a critical part of professional web development.

Image: Video with captions enabled

Special Characters in HTML

HTML entities are used to display reserved characters in HTML. For example, if you want to display a copyright symbol or angle brackets, you need to use entities.

The Two Ways to Create the Copyright Symbol ©

You can use either the entity name or the entity number. Both produce the exact same result. The entity name is generally easier to remember.

1. Using the Entity Name (Recommended)

This is the most common and readable method.

Code: &copy;

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

2. Using the Entity Number

This method uses the character's numerical code. It works just as well but is less descriptive.

Code: &#169;

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

Other Common Symbol Entities

Why do we need entities for < and >?

Because the browser would interpret < and > as the start or end of an HTML tag. If you want to literally display the text <p> on your page, you must write &lt;p&gt;.