HTML Audio & Video

Beginner ~10 min read

HTML5 Media Elements

Before HTML5, playing audio or video required plugins like Flash. HTML5 introduced native <audio> and <video> elements.

The Audio Element

The <audio> element embeds sound content in documents.

HTML

CSS

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

Tip: Common audio formats are MP3, WAV, and OGG. MP3 has the best browser support.

The Video Element

The <video> element embeds video content. Use multiple <source> elements for different formats.

HTML

CSS

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

Video Attributes

controls - Shows play/pause, volume, etc.
autoplay - Starts playing automatically
muted - Mutes the audio (required for autoplay in most browsers)
loop - Loops the video continuously
poster - Image shown before video plays
width/height - Sets dimensions

HTML

CSS

<video width="320" height="240"\n       controls\n       autoplay\n       muted\n       loop\n       poster="thumbnail.jpg">\n  <source src="movie.mp4" type="video/mp4">\n</video>

Quick Quiz

Which attribute is required for autoplay to work in most browsers?

controls

muted

loop

poster

Previous Images

Next Iframes

HTML5 Media Elements

The Audio Element

The Video Element

Video Attributes

Quick Quiz

Enjoying these tutorials?