HTML multimedia is how you put sound and video into a page using native tags—mainly <audio> and <video>—instead of plugins.
Both elements share the same media engine in the browser (HTMLMediaElement). Attributes such as controls, muted, loop, and preload, plus script methods like play() and pause(), work the same way on audio and video.
Put the media element in your markup, point it at a file with src or nested <source> tags, and give users a way to play (controls or custom buttons). Use <track> for captions, and <iframe> when the video is hosted elsewhere (YouTube, Vimeo).
Host your own files with audio / video when you need full control of formats, posters, and captions. Use an iframe when a platform already hosts and streams the clip.
Native controls (or an accessible custom UI) let visitors play, pause, and change volume. Autoplay with sound is usually blocked.
If you need background motion, use autoplay muted playsinline. Never assume loud autoplay will start.
Minimal patterns for audio, video, captions, and a page-script control:
<audio controls>
<source src="sound.mp3" type="audio/mpeg">
Your browser does not support audio.
</audio><video width="640" height="360" controls poster="thumb.jpg">
<source src="clip.webm" type="video/webm">
<source src="clip.mp4" type="video/mp4">
<track kind="subtitles" src="en.vtt" srclang="en" label="English">
Your browser does not support video.
</video>var media = document.getElementById("demo");
media.play(); // returns a Promise
media.pause();
media.currentTime = 0;
media.muted = true;Building blocks of multimedia on a page:
| Element / idea | Role on the page |
|---|---|
<audio> | Sound-only media |
<video> | Moving picture (+ optional sound) |
<source> | Alternate formats; browser picks the first it can play |
<track> | Subtitles / captions (WebVTT) |
<iframe> | Hosted players (YouTube, Vimeo, …) |
| HTMLMediaElement | Shared API behind audio and video |
| Attribute | Meaning |
|---|---|
controls | Show the browser’s play / seek / volume UI |
src | Single media URL (or use nested source) |
muted | Start silent (needed for many autoplay cases) |
loop | Replay when the clip ends |
autoplay | Try to start automatically (often blocked with sound) |
preload | none | metadata | auto |
poster | Image shown before video plays (video only) |
| API | Use from a page script |
|---|---|
play() / pause() | Start or stop playback (play() returns a Promise) |
currentTime | Read or seek position (seconds) |
duration | Length in seconds (after metadata loads) |
muted / volume | Silence or set loudness (0–1) |
paused / ended | Read-only playback state |
| Events | play, pause, ended, timeupdate, error, … |
A simple workflow from markup to playback:
audio or video (or an iframe for hosted video).source files with correct type MIME values.controls (or build accessible custom buttons that call play() / pause()).width / height or CSS size; optional poster.track for captions when the clip has speech.| Goal | HTML pattern |
|---|---|
| Playable sound | <audio controls><source …></audio> |
| Playable video | <video controls><source …></video> |
| Silent hero loop | <video autoplay muted loop playsinline> |
| Captions | <track kind="subtitles" src="en.vtt" …> |
| YouTube / Vimeo | <iframe src="…/embed/…" title="…" allowfullscreen> |
Native video with browser controls. Optional buttons call the shared media methods from a page script.
Six patterns: audio, audio attributes, video, poster, YouTube iframe, and a full page.
<audio controls>
<source src="t-rex-roar.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio><audio controls loop preload="metadata">
<source src="t-rex-roar.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio><video width="640" height="360" controls>
<source src="flower.webm" type="video/webm">
<source src="flower.mp4" type="video/mp4">
Your browser does not support the video tag.
</video><video width="640" height="360" controls poster="thumbnail.jpg">
<source src="flower.webm" type="video/webm">
Your browser does not support the video tag.
</video>controls so playback is clear.<iframe width="560" height="315"
src="https://www.youtube.com/embed/EngW7tLk6R8"
title="HTML tutorial video"
allowfullscreen></iframe>Combines audio, video, and an embedded iframe:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Multimedia Example</title>
</head>
<body>
<h1>HTML Multimedia Example</h1>
<h2>Audio Example</h2>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
<h2>Video Example</h2>
<video width="640" height="360" controls>
<source src="video.webm" type="video/webm">
</video>
<h2>Embedded Video</h2>
<iframe src="https://www.youtube.com/embed/VIDEO_ID"
title="Tutorial video" allowfullscreen></iframe>
</body>
</html>Most media bugs are autoplay policy, missing formats, or inaccessible players.
Use muted for decorative video, or wait for a user gesture before play().
Offer at least MP4 (video) / MP3 (audio) plus a modern alternative when you can.
Add a track WebVTT file for spoken content; describe iframe embeds with title.
Set dimensions or aspect-ratio CSS, and consider a poster.
Some script features need proper CORS headers on the media host.
play() returns a Promise—catch failures so your UI can fall back to a Play button.
Native audio and video (HTMLMediaElement) are Baseline and available in all modern browsers. Always provide fallback text and multiple sources when formats differ.
audio, video, source, and track work across current browsers without plugins.
Bottom line: Use controls, offer solid formats, and treat autoplay with muted as the safe default for decorative video.
controls, muted, loop) come from the media element model.One line: Put media in HTML with audio/video (or iframe), give users controls, and use the shared media API only when you need custom play/pause.
Open the full multimedia page and tweak audio, video, and iframe embeds.
8 people found this page helpful