Audio, Video, and Time-Based Media

HTML5 made audio and video native browser features. You no longer need old plugin-based approaches for common media playback.

The <audio> Tag

Purpose:

• embeds sound content

Important attributes:

• src
• controls
• autoplay
• muted
• loop
• preload

Common preload values:

• none
• metadata
• auto

Example:

<audio controls preload="metadata">
    <source src="podcast.mp3" type="audio/mpeg">
    <source src="podcast.ogg" type="audio/ogg">
    Your browser does not support audio playback.
</audio>

The <video> Tag

Purpose:

• embeds video content

Important attributes:

• src
• controls
• width
• height
• poster
• autoplay
• muted
• loop
• playsinline

Example:

<video controls width="640" poster="preview.jpg">
    <source src="lesson.mp4" type="video/mp4">
    <source src="lesson.webm" type="video/webm">
    Your browser does not support video playback.
</video>

Supporting Tags

<source>

Purpose:

• provides alternate files for media or picture elements

Important attributes:

• src
• type
• media
• srcset

<track>

Purpose:

• adds subtitles, captions, descriptions, or chapters

Important attributes:

• src
• kind
• srclang
• label
• default

Common kind values:

• captions
• subtitles
• descriptions
• chapters
• metadata

Good Media Habits

• include controls unless you have a custom player
• avoid autoplay with sound
• provide captions when possible
• use modern compressed formats