Audio and Video

HTML provides native elements for embedding audio and video without plugins.

Video Element

<!-- Basic video -->
<video src="video.mp4" controls>
    Your browser does not support video.
</video>

<!-- Video with multiple sources -->
<video controls width="640" height="360">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <source src="video.ogv" type="video/ogg">
    <track kind="subtitles" src="subs_en.vtt" srclang="en" label="English">
    <track kind="captions" src="captions_en.vtt" srclang="en" label="English">
    Your browser does not support video.
</video>

Audio Element

<!-- Basic audio -->
<audio src="audio.mp3" controls>
    Your browser does not support audio.
</audio>

<!-- Audio with multiple sources -->
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    <source src="audio.wav" type="audio/wav">
    Your browser does not support audio.
</audio>

<!-- Background audio (no controls) -->
<audio src="ambient.mp3" autoplay loop>
</audio>

Media Formats

Format	Video	Audio	Browser Support
MP4	H.264	AAC	All modern
WebM	VP8/VP9	Opera, Chrome, Firefox
Ogg	Theora	Vorbis	Firefox, Chrome
AV1	AV1	Opera, Chrome, Firefox

Common Attributes

Attribute	Purpose	Example
controls	Show player controls	controls
autoplay	Start playing	autoplay
loop	Loop playback	loop
muted	Start muted	muted
preload	Loading behavior	preload="none"
poster	Video thumbnail	poster="thumb.jpg"
width	Display width	width="640"
height	Display height	height="360"

Preload Values

<!-- Don't preload (save bandwidth) -->
<audio preload="none" src="audio.mp3"></audio>

<!-- Preload metadata only -->
<audio preload="metadata" src="audio.mp3"></audio>

<!-- Preload entire file -->
<audio preload="auto" src="audio.mp3"></audio>

Media elements have many attributes for controlling playback.

Video Attributes

<video
    src="video.mp4"
    controls          <!-- Show controls -->
    autoplay          <!-- Auto-play (muted required in most browsers) -->
    loop              <!-- Loop playback -->
    muted             <!-- Start muted -->
    poster="thumb.jpg" <!-- Thumbnail before play -->
    width="640"       <!-- Display width -->
    height="360"      <!-- Display height -->
    preload="metadata" <!-- Load metadata only -->
    playsinline       <!-- Play inline on mobile -->
>
</video>

Audio Attributes

<audio
    src="audio.mp3"
    controls          <!-- Show controls -->
    autoplay          <!-- Auto-play -->
    loop              <!-- Loop -->
    muted             <!-- Muted -->
    preload="metadata"
>
</audio>

JavaScript Media API

const video = document.querySelector('video');

// Playback control
video.play();
video.pause();
video.load();

// Properties
video.duration;      // Total duration (seconds)
video.currentTime;   // Current position (seconds)
video.volume;        // Volume (0-1)
video.muted;         // Muted state (boolean)
video.paused;        // Paused state (boolean)
video.ended;         // Ended state (boolean)
video.readyState;    // Loading state (0-4)

// Events
video.addEventListener('play', () => console.log('Playing'));
video.addEventListener('pause', () => console.log('Paused'));
video.addEventListener('ended', () => console.log('Ended'));
video.addEventListener('timeupdate', () => {
    console.log(`Progress: ${video.currentTime}/${video.duration}`);
});
video.addEventListener('loadedmetadata', () => {
    console.log(`Duration: ${video.duration}s`);
});

// Seek
video.currentTime = 30;  // Jump to 30 seconds

// Volume
video.volume = 0.5;  // 50% volume
video.muted = true;   // Mute

Custom Controls

<video id="myVideo" src="video.mp4"></video>
<button id="playBtn">Play</button>
<button id="pauseBtn">Pause</button>
<input type="range" id="volume" min="0" max="1" step="0.1" value="1">
<progress id="progress" value="0" max="100"></progress>

<script>
const video = document.getElementById('myVideo');
const playBtn = document.getElementById('playBtn');
const pauseBtn = document.getElementById('pauseBtn');
const volume = document.getElementById('volume');
const progress = document.getElementById('progress');

playBtn.addEventListener('click', () => video.play());
pauseBtn.addEventListener('click', () => video.pause());

volume.addEventListener('input', (e) => {
    video.volume = e.target.value;
});

video.addEventListener('timeupdate', () => {
    progress.value = (video.currentTime / video.duration) * 100;
});
</script>

Making media accessible ensures everyone can consume your content.

Captions and Subtitles

<video controls>
    <source src="video.mp4" type="video/mp4">
    
    <!-- Captions (for deaf/hard of hearing) -->
    <track kind="captions" src="captions_en.vtt" srclang="en" label="English Captions" default>
    <track kind="captions" src="captions_es.vtt" srclang="es" label="Spanish Captions">
    
    <!-- Subtitles (for translation) -->
    <track kind="subtitles" src="subs_en.vtt" srclang="en" label="English Subtitles">
    <track kind="subtitles" src="subs_es.vtt" srclang="es" label="Spanish Subtitles">
    
    <!-- Descriptions (for blind users) -->
    <track kind="descriptions" src="desc_en.vtt" srclang="en" label="English Descriptions">
</video>

WebVTT Format

WEBVTT

00:00:01.000 --> 00:00:04.000
Hello, welcome to our video.

00:00:05.000 --> 00:00:08.000
Today we'll learn about HTML.

00:00:09.000 --> 00:00:12.000
Let's get started!

Audio Descriptions

<!-- Provide text alternative -->
<video controls>
    <source src="video.mp4" type="video/mp4">
    <track kind="descriptions" src="descriptions.vtt">
</video>

<!-- Or provide transcript -->
<details>
    <summary>Transcript</summary>
    <p>Full transcript of the video content...</p>
</details>

Autoplay Restrictions

<!-- Autoplay blocked by most browsers -->
<video autoplay src="video.mp4"></video>

<!-- Autoplay works if muted -->
<video autoplay muted src="video.mp4"></video>

<!-- Better: let user initiate -->
<video controls src="video.mp4"></video>

Responsive Media

/* Responsive video */
video, audio {
    max-width: 100%;
    height: auto;
}

/* Responsive container */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}