Skip to content
Laviyx Learn

Try

HTML course menu

HTML Audio and Video: audio, video, source and track Elements

Add sound and video to web pages with the HTML audio and video elements: controls, autoplay rules, muted, loop, poster and preload, multiple formats with source, captions and subtitles with track and WebVTT, and accessibility tips.

Intermediate4 min readUpdated
On this page

HTML plays sound and video without any plugin, using the <audio> and <video> elements. The browser provides the play button, progress bar and volume control.

Audio#

HTML
<audio controls src="/lesson-assets/chime.wav">
  Your browser does not support the audio element.
</audio>
Result

Press play to hear a short three-note chime.

  • controls shows the browser's player controls. Without it, nothing is visible and the sound can only be started by JavaScript.
  • src is the sound file. Common formats are MP3 (.mp3), AAC (.m4a), Ogg (.ogg), Opus and WAV.
  • The text inside is shown only by browsers that do not support <audio> at all.

Video#

HTML
<video controls width="640" height="360" poster="/images/lesson-thumbnail.jpg">
  <source src="/videos/lesson.webm" type="video/webm">
  <source src="/videos/lesson.mp4" type="video/mp4">
  <track kind="captions" src="/videos/lesson.en.vtt" srclang="en" label="English" default>
  <p>Your browser cannot play this video. <a href="/videos/lesson.mp4">Download the video</a>.</p>
</video>
AttributePurpose
controlsShow play, pause, seek and volume controls
width, heightDisplay size; prevents layout shift like with images
posterImage shown before the video starts
preloadHint about how much to download early: none, metadata or auto
mutedStart with the sound off
loopStart again at the end
autoplayStart playing automatically (see the rules below)
playsinlineOn iPhones, play inside the page instead of going full screen

Several formats with source#

Instead of a single src, list one <source> per file. The browser uses the first one it can play, and type lets it skip formats it does not support without downloading them. MP4 with H.264 video plays in all modern browsers, so it is a safe last option.

Autoplay rules#

Browsers block videos and audio that start with sound on their own, because unexpected noise is annoying. Generally, autoplay is allowed when the video is muted:

HTML
<video autoplay muted loop playsinline src="/videos/background.mp4"></video>

Even muted, moving content can distract or affect people with motion sensitivity. Keep autoplaying videos short or provide a pause button.

Captions and subtitles with track#

<track> adds timed text in the WebVTT format (a .vtt text file):

lesson.en.vtt (Text)
WEBVTT

00:00:00.000 --> 00:00:04.000
Welcome to the HTML video lesson.

00:00:04.000 --> 00:00:08.500
Today we add captions with the track element.
kindMeaning
captionsDialogue and important sounds, for people who are deaf or hard of hearing
subtitlesTranslated dialogue
descriptionsText descriptions of what is happening on screen
chaptersChapter titles for navigation

Captions help deaf and hard of hearing viewers, people watching with the sound off, and people watching in a second language. Also consider offering a text transcript on the page.

Hosting video#

Video files are large and need fast delivery in several sizes. Many sites upload videos to a video platform and embed its player instead of hosting files themselves. Embedding is covered in the next lesson, Iframes and Embeds.

Practice#

Practice exercise

Write the HTML for a muted, looping product video that plays automatically without going full screen on iPhones, with an MP4 source at /videos/product.mp4, a poster image at /images/product.jpg, and a size of 480 × 270.

Show solution
HTML
<video autoplay muted loop playsinline width="480" height="270" poster="/images/product.jpg">
  <source src="/videos/product.mp4" type="video/mp4">
</video>

Key takeaway#

Finished this lesson?

Related lessons

HTMLHTML iframe: Embedding Maps, Videos and Other Pages SafelyLearn to embed other web pages with the HTML iframe element: src, width and height, the title attribute for accessibility, lazy loading, the sandbox and allow attributes for security, srcdoc, and why some sites refuse to be embedded.Intermediate4 min readHTMLHTML Images: The img Element, src, alt Text, Width and HeightLearn to add images to web pages with the img element: the src and alt attributes, writing good alt text, empty alt for decorative images, width and height to prevent layout shift, lazy loading, and choosing between JPEG, PNG, WebP, AVIF and SVG.Beginner4 min readHTMLHTML Accessibility: Building Pages Everyone Can UseLearn the HTML side of web accessibility: who benefits, semantic elements and landmarks, headings, alt text, labelled forms, keyboard access and focus, link text, colour and contrast, language, and how to test with a keyboard and a screen reader.Advanced5 min read