Audio and Video API

This lesson explains Audio and Video API with clear examples, use cases, and best practices so you can use HTML5 APIs confidently in real web applications.

HTML5 Audio & Video API Overview

The HTML5 Audio and Video APIs allow developers to embed and control multimedia content directly within web pages without requiring third-party plugins such as Adobe Flash. Native media support provides better performance, improved accessibility, responsive playback, and consistent behavior across modern browsers.

Using the HTML5 audio and video elements along with the Media API, developers can play, pause, seek, adjust volume, display subtitles, enter fullscreen mode, and build custom media players using JavaScript.

Feature	Description
Native Playback	Play audio and video without browser plugins.
JavaScript Control	Control playback programmatically.
Responsive Media	Works across desktop and mobile devices.
Accessibility	Supports captions, subtitles, and transcripts.
Streaming Support	Compatible with modern streaming technologies.
Media Events	Provides events for playback and user interaction.

Basic Audio & Video Example

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  Your browser does not support audio.
</audio>

<video controls width="600">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support video.
</video>

The controls attribute displays built-in playback controls, while one or more source elements provide media files in different formats for browser compatibility.

Common Media Properties

Property	Description	Example
currentTime	Current playback position.	video.currentTime
duration	Total media duration.	video.duration
paused	Checks whether playback is paused.	video.paused
volume	Gets or sets audio volume.	video.volume = 0.5
muted	Mutes or unmutes media.	video.muted = true
playbackRate	Controls playback speed.	video.playbackRate = 1.5

Common Media Methods

Method	Purpose
play()	Starts media playback.
pause()	Pauses playback.
load()	Reloads media resources.
requestPictureInPicture()	Opens floating video player.
requestFullscreen()	Displays media in fullscreen mode.
captureStream()	Captures media stream for recording or sharing.

Important Media Events

Event	Triggered When
play	Playback starts.
pause	Playback pauses.
ended	Media finishes playing.
timeupdate	Current playback position changes.
volumechange	Volume or mute state changes.
loadedmetadata	Metadata becomes available.
waiting	Playback waits for more data.
error	Media loading fails.

Audio & Video Best Practices

Provide multiple media formats for browser compatibility.
Always include captions and subtitles for videos.
Provide transcripts for audio-only content.
Avoid autoplay whenever possible.
Compress media files for faster loading.
Use responsive layouts for media players.
Allow keyboard-accessible playback controls.
Lazy-load videos when appropriate.

Common Mistakes

Depending on a single media format.
Autoplaying media with sound.
Missing captions or subtitles.
Ignoring accessibility requirements.
Loading large video files without optimization.
Using custom controls without keyboard support.

Key Takeaways

HTML5 provides native audio and video playback.
JavaScript can fully control media playback.
Media properties expose playback state and metadata.
Media events enable interactive media applications.
Accessibility features such as captions and transcripts are essential.
Responsive, optimized media improves performance and user experience.

Pro Tip

For production applications, combine the HTML5 Media API with the MediaDevices API, MediaRecorder API, Picture-in-Picture API, Fullscreen API, and Web Audio API to build modern media players, video conferencing platforms, podcast applications, streaming services, and interactive multimedia experiences.