HTML Multimedia

We also need:

• Audio
• Video
• Podcasts
• Tutorials
• Product demonstrations
• Music
• Training content
• Video courses
• Background videos
• Captions and subtitles

HTML provides native elements for multimedia:

<audio>
<video>
<source>
<track>

The major advantage is that modern browsers can play many media formats without requiring plugins.

1. What Is HTML Multimedia?#

HTML multimedia means embedding media directly into a webpage using HTML.

For example:

<video controls>
    <source src="video.mp4" type="video/mp4">
</video>

The browser can provide the playback interface.

Conceptually:

HTML
 │
 ├── <audio>
 │      ↓
 │    Audio player
 │
 └── <video>
        ↓
      Video player

2. <audio>#

The <audio> element is used to embed sound.

Basic example:

<audio controls>
    <source
        src="song.mp3"
        type="audio/mpeg"
    >
</audio>

The browser can display controls similar to:

┌──────────────────────────────────────┐
│ ▶ ━━━━━━━●━━━━━━━━ 🔊              │
└──────────────────────────────────────┘

3. The controls Attribute#

Without:

controls

the browser normally doesn't provide its standard visible playback controls.

Example:

<audio
    src="song.mp3"
    controls
>
</audio>

The user can typically:

• Play
• Pause
• Seek
• Change volume

depending on the browser.

4. Why Use <source>?#

Instead of:

<audio src="song.mp3" controls></audio>

you can use:

<audio controls>
 
    <source
        src="song.mp3"
        type="audio/mpeg"
    >
 
</audio>

This becomes especially useful when you want to provide multiple formats.

5. Multiple Audio Sources#

Example:

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

The browser can choose an appropriate supported source.

Conceptually:

             AUDIO
                │
       ┌────────┴────────┐
       │                 │
    MP3 source        OGG source
       │                 │
       └────────┬────────┘
                │
              Browser
                │
                ▼
             Play

6. Common Audio Formats#

Some commonly encountered formats:

Browser support and codec support can vary, so production sites should test their target browsers.

7. Audio Example#

<section>
 
    <h2>Podcast</h2>
 
    <p>
        Listen to our latest episode.
    </p>
 
    <audio controls preload="metadata">
 
        <source
            src="/podcast/episode-01.mp3"
            type="audio/mpeg"
        >
 
        <source
            src="/podcast/episode-01.ogg"
            type="audio/ogg"
        >
 
        Your browser does not support audio playback.
 
    </audio>
 
</section>

This is already a good semantic structure.

8. <video>#

The <video> element embeds video content.

Basic example:

<video
    controls
    width="640"
>
    <source
        src="video.mp4"
        type="video/mp4"
    >
</video>

The browser can provide:

┌──────────────────────────────────────┐
│                                      │
│              VIDEO                   │
│                                      │
│                                      │
├──────────────────────────────────────┤
│ ▶  ━━━━━●━━━━━━━━━━━━  🔊  ⛶        │
└──────────────────────────────────────┘

9. controls#

Just like audio:

<video controls>

provides browser playback controls.

Without it:

<video>

the user may not have an obvious way to control playback unless you build controls with JavaScript.

10. Video with Multiple Sources#

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

The browser evaluates the sources and uses a compatible one.

11. Common Video Formats#

But remember:

A file extension alone does not tell the whole story.

Video compatibility depends on the container and codec.

For example, an MP4 file can contain different video/audio codecs.

12. poster#

You can specify an image shown before video playback:

<video
    controls
    poster="/images/course-thumbnail.jpg"
>
    <source
        src="/videos/html-course.mp4"
        type="video/mp4"
    >
</video>

Conceptually:

Before play:
 
┌──────────────────────────────────┐
│                                  │
│       COURSE THUMBNAIL           │
│                                  │
│              ▶                   │
│                                  │
└──────────────────────────────────┘

This is especially useful for:

• Video courses
• Product demos
• Tutorials
• Marketing videos

13. width and height#

You can specify dimensions:

<video
    controls
    width="800"
    height="450"
>

However, dimensions in HTML should describe the intended media dimensions; CSS is generally responsible for responsive presentation.

14. Why Dimensions Matter#

Knowing the media dimensions ahead of time can help browsers allocate appropriate space and reduce layout movement.

For example:

<video
    width="1280"
    height="720"
    controls
>

represents a 16

The aspect ratio is:

1280 / 720 = 1.777...

approximately:

16:9

15. Responsive Video#

For responsive layouts, CSS is typically used.

Example:

<video
    controls
    width="1280"
    height="720"
>
    <source
        src="/video.mp4"
        type="video/mp4"
    >
</video>

Then CSS might use:

video {
    max-width: 100%;
    height: auto;
}

The important separation is:

HTML
→ describes the media
 
CSS
→ controls responsive presentation

16. autoplay#

You can request automatic playback:

<video
    autoplay
    controls
>
    <source src="video.mp4" type="video/mp4">
</video>

However, browsers often restrict autoplay when media contains audio.

That's why this common pattern exists:

<video
    autoplay
    muted
    loop
>
    <source
        src="background.mp4"
        type="video/mp4"
    >
</video>

Muted autoplay is much more likely to be allowed.

17. Why muted Is Important With Autoplay#

Suppose:

<video autoplay>

tries to start with sound.

Browsers may block it to avoid unexpectedly playing audio.

But:

<video
    autoplay
    muted
>

is much more suitable for things such as:

• Background video
• Decorative animation
• Hero sections

Still, autoplay behavior can depend on browser policies and user settings.

18. loop#

loop makes the media repeat.

Example:

<video
    autoplay
    muted
    loop
>
    <source
        src="background.mp4"
        type="video/mp4"
    >
</video>

The flow becomes:

Play
 ↓
End
 ↓
Start again
 ↓
End
 ↓
Start again
 ↓
...

19. Background Video Example#

A common website hero:

<section>
 
    <video
        autoplay
        muted
        loop
        playsinline
        poster="/images/hero.jpg"
    >
 
        <source
            src="/videos/hero.mp4"
            type="video/mp4"
        >
 
    </video>
 
    <h1>
        Build the Future
    </h1>
 
</section>

The playsinline attribute is particularly relevant on mobile browsers.

20. playsinline#

<video playsinline>

This requests that video play inline rather than being forced into a separate fullscreen-style playback experience on supported mobile browsers.

It is commonly used with:

autoplay muted loop playsinline

for background or inline video experiences.

21. preload#

preload provides a hint about how much media the browser should preload.

Values include:

none
metadata
auto

Example:

<video
    controls
    preload="metadata"
>

none#

preload="none"

Hint:

Don't preload media unnecessarily.

metadata#

preload="metadata"

Hint:

Load metadata such as duration/dimensions where appropriate.

auto#

preload="auto"

Hint:

The browser may preload more of the resource.

Important:

preload is a hint, not an absolute command.

22. Choosing preload#

For a video below the fold:

<video
    controls
    preload="metadata"
>

may be reasonable.

For a large video that users may never watch:

<video
    controls
    preload="none"
>

can reduce unnecessary network activity.

For a media experience where early loading is important:

preload="auto"

may sometimes make sense.

Always consider performance.

23. Audio preload#

The same concept applies to audio:

<audio
    controls
    preload="metadata"
>

or:

<audio
    controls
    preload="none"
>

24. <track>#

One of the most important multimedia accessibility features is:

<track>

It can provide:

• Captions
• Subtitles
• Descriptions
• Chapters
• Metadata

Example:

<video controls>
 
    <source
        src="lecture.mp4"
        type="video/mp4"
    >
 
    <track
        src="captions-en.vtt"
        kind="captions"
        srclang="en"
        label="English"
        default
    >
 
</video>

25. What Is a .vtt File?#

VTT means:

Web Video Text Tracks

A simple VTT file can look like:

WEBVTT
 
00:00.000 --> 00:03.000
Welcome to the HTML course.
 
00:03.000 --> 00:06.000
Today we will learn semantic HTML.

The browser uses these time ranges to synchronize text with the video.

26. Captions vs Subtitles#

These terms are often confused.

Subtitles#

Generally communicate spoken dialogue, often for viewers who may not understand the spoken language.

Captions#

Can include:

• Spoken dialogue
• Important sound information
• Other relevant audio cues

For example:

[Door opens]
 
Welcome to the course.
 
[Background music]

Captions are particularly important for accessibility.

27. kind="captions"#

Example:

<track
    src="captions.vtt"
    kind="captions"
    srclang="en"
    label="English"
    default
>

This indicates the track provides captions.

28. kind="subtitles"#

Example:

<track
    src="subtitles-hi.vtt"
    kind="subtitles"
    srclang="hi"
    label="Hindi"
>

This can provide Hindi subtitles.

You could provide multiple languages:

<video controls>
 
    <source
        src="course.mp4"
        type="video/mp4"
    >
 
    <track
        src="en.vtt"
        kind="subtitles"
        srclang="en"
        label="English"
        default
    >
 
    <track
        src="hi.vtt"
        kind="subtitles"
        srclang="hi"
        label="Hindi"
    >
 
</video>

29. srclang#

This specifies the language of the track.

Example:

srclang="en"

English.

srclang="hi"

Hindi.

srclang="fr"

French.

30. label#

label gives the user a readable name for the track.

Example:

label="English"

or:

label="Hindi"

The browser can use this when presenting track choices.

31. default#

You can specify a default track:

default

Example:

<track
    src="english.vtt"
    kind="captions"
    srclang="en"
    label="English"
    default
>

32. Video Accessibility#

A professional video should consider:

Video
│
├── Captions
├── Subtitles where appropriate
├── Keyboard accessibility
├── Clear controls
├── Text alternatives where needed
└── Audio description where appropriate

Don't assume:

"Video = accessible automatically."

It isn't.

33. Audio Accessibility#

Audio-only content can be inaccessible to users who cannot hear it.

For important audio content, provide a text transcript.

Example:

<section>
 
    <h2>Podcast Episode 1</h2>
 
    <audio controls>
        <source
            src="episode-1.mp3"
            type="audio/mpeg"
        >
    </audio>
 
    <p>
        <a href="/transcripts/episode-1">
            Read the transcript
        </a>
    </p>
 
</section>

This provides an alternative way to access the information.

34. Video Transcript#

For important educational videos:

<section>
 
    <h2>HTML Tutorial</h2>
 
    <video controls>
        <source
            src="/videos/html.mp4"
            type="video/mp4"
        >
 
        <track
            src="/captions/html-en.vtt"
            kind="captions"
            srclang="en"
            label="English"
            default
        >
    </video>
 
    <p>
        <a href="/transcripts/html">
            Read the full transcript
        </a>
    </p>
 
</section>

This is a strong accessibility pattern.

35. Audio and Video Are Void Elements?#

No.

This is an important distinction.

<img> is a void element:

<img src="image.jpg" alt="...">

But:

<audio></audio>

and:

<video></video>

are not void elements.

They can contain:

<source>
<track>

and fallback text.

36. Fallback Content#

Example:

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

The text after the <source> can serve as fallback content when the video cannot be used.

Similarly:

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

37. src vs <source>#

You can write:

<video
    src="video.mp4"
    controls
>
</video>

or:

<video controls>
 
    <source
        src="video.mp4"
        type="video/mp4"
    >
 
</video>

Use <source> when you need:

• Multiple formats
• Clear MIME types
• More flexible source selection

38. type on <source>#

Example:

<source
    src="video.mp4"
    type="video/mp4"
>

The type tells the browser what media type the source represents.

Another:

<source
    src="video.webm"
    type="video/webm"
>

This can help the browser decide whether it can use a source.

39. Media Events#

When JavaScript is introduced, media elements expose events such as:

play
pause
ended
timeupdate
volumechange
loadedmetadata
canplay
waiting

Example:

const video = document.querySelector("video");
 
video.addEventListener("play", () => {
    console.log("Video started");
});

Or:

video.addEventListener("ended", () => {
    console.log("Video finished");
});

We'll explore media APIs later.

40. currentTime#

JavaScript can access the current playback position:

const video = document.querySelector("video");
 
console.log(video.currentTime);

For example:

currentTime = 35.5

means approximately 35.5 seconds into the media.

You can also set it:

video.currentTime = 60;

which seeks to approximately 60 seconds.

41. duration#

You can read the duration:

console.log(video.duration);

For example:

245.7

means approximately:

245.7 seconds

or about:

4 minutes 5.7 seconds

42. play() and pause()#

JavaScript can control playback.

const video = document.querySelector("video");
 
video.play();

Pause:

video.pause();

This enables custom media players.

43. Example Custom Controls#

HTML:

<video
    id="course-video"
    src="course.mp4"
>
</video>
 
<button id="play">
    Play
</button>
 
<button id="pause">
    Pause
</button>

JavaScript:

const video = document.querySelector("#course-video");
 
document.querySelector("#play").addEventListener(
    "click",
    () => {
        video.play();
    }
);
 
document.querySelector("#pause").addEventListener(
    "click",
    () => {
        video.pause();
    }
);

Now you're building your own controls.

44. Why Native Controls Are Often Better#

Before building a custom player, remember that:

controls

already provides a browser-native media interface.

Native controls have advantages:

• Keyboard support
• Browser integration
• Accessibility behavior
• Less JavaScript
• Less maintenance

Build custom controls only when your product actually requires them.

45. muted#

JavaScript can also control whether media is muted:

video.muted = true;

or:

video.muted = false;

HTML:

<video
    muted
    controls
>

46. volume#

JavaScript:

video.volume = 0.5;

means approximately:

50% volume

The range is generally:

0 → silent
1 → maximum

47. playbackRate#

You can change playback speed:

video.playbackRate = 1.5;

Possible values:

0.5 → half speed
1.0 → normal
1.5 → 1.5×
2.0 → 2×

This is useful for:

• Online courses
• Tutorials
• Lectures
• Podcasts

48. Media Performance#

Video can be extremely expensive compared with HTML text.

Consider:

HTML page
→ relatively small
 
Image
→ potentially several MB
 
Video
→ potentially hundreds of MB

Therefore:

Don't automatically preload huge videos.#

Consider:

preload="metadata"

or:

preload="none"

when appropriate.

49. Lazy Loading and Video#

Unlike images, video doesn't use:

loading="lazy"

as a standard equivalent in the same way.

Instead, performance strategies may include:

• preload="none"
• preload="metadata"
• Poster images
• Loading media only when needed
• JavaScript-driven deferred loading
• Streaming/CDN infrastructure

50. Video Compression#

Suppose your source video is:

2 GB

That's a terrible resource for most webpage use cases.

You should consider:

Compression
Resolution
Bitrate
Codec
Container
Streaming strategy

For example:

4K source
   ↓
1080p web version
   ↓
720p web version
   ↓
Adaptive streaming if needed

51. Don't Upload Massive Files Directly#

For production applications, especially large video platforms, you generally don't want:

Browser
   ↓
One giant video file
   ↓
Application server

Instead, a media architecture may use:

User
 ↓
CDN / Media service
 ↓
Video segments
 ↓
Browser

For large-scale video platforms, adaptive streaming technologies such as HLS or MPEG-DASH may be used.

That's beyond basic HTML, but it's important to understand the architecture.

52. iframe vs <video>#

This is an important distinction.

If you have your own video file:

<video controls>
    <source src="video.mp4">
</video>

But if you're embedding a video hosted by another platform, you may use:

<iframe
    src="..."
    title="Video"
></iframe>

For example, many video platforms provide an embed URL.

Conceptually:

Your video
    ↓
<video>
 
External platform
    ↓
<iframe>

We'll study <iframe> and embedded content in Chapter 13.

53. <audio> vs <video>#

54. Multimedia Cheat Sheet#

Audio#

<audio controls>
    <source src="song.mp3" type="audio/mpeg">
</audio>

Video#

<video controls>
    <source src="video.mp4" type="video/mp4">
</video>

Poster#

<video
    controls
    poster="thumbnail.jpg"
>

Autoplay#

<video autoplay muted>

Loop#

<video loop>

Inline playback#

<video playsinline>

Preload#

<video preload="metadata">

Captions#

<track
    src="captions.vtt"
    kind="captions"
    srclang="en"
    label="English"
>

55. Professional Video Example#

<section>
 
    <h2>HTML Course — Chapter 12</h2>
 
    <figure>
 
        <video
            controls
            width="1280"
            height="720"
            preload="metadata"
            poster="/images/html-course.jpg"
        >
 
            <source
                src="/videos/html-chapter-12.mp4"
                type="video/mp4"
            >
 
            <source
                src="/videos/html-chapter-12.webm"
                type="video/webm"
            >
 
            <track
                src="/captions/chapter-12-en.vtt"
                kind="captions"
                srclang="en"
                label="English"
                default
            >
 
            Your browser does not support HTML video.
 
        </video>
 
        <figcaption>
            Chapter 12 — HTML Multimedia
        </figcaption>
 
    </figure>
 
    <p>
        <a href="/transcripts/chapter-12">
            Read the transcript
        </a>
    </p>
 
</section>

This combines:

section
heading
figure
video
source
track
captions
poster
preload
figcaption
transcript

Excellent production-oriented structure.

56. Common Mistakes#

Mistake 1 — Autoplaying audio unexpectedly#

Avoid:

<audio autoplay>

unless there's a very specific user-friendly reason.

Unexpected sound is a poor user experience.

Mistake 2 — Autoplay without considering mobile/browser policies#

Don't assume:

autoplay

will always work.

For background video, a common pattern is:

autoplay muted loop playsinline

Mistake 3 — No captions#

For important video content:

<track kind="captions">

should be considered.

Mistake 4 — Huge unoptimized video#

Don't ship:

500 MB

when a properly optimized media asset could be much smaller.

Mistake 5 — Forgetting fallback content#

Provide useful fallback text:

Your browser does not support HTML video.

Mistake 6 — Using video for information that could simply be text#

If a critical piece of information can be expressed directly as HTML text, don't make video the only way to access it.

57. Interview Questions#

Q1. What is <audio> used for?#

Embedding audio content into an HTML document.

Q2. What is <video> used for?#

Embedding video content.

Q3. Why use <source>?#

To provide one or more media sources and specify their types.

Q4. What does controls do?#

Requests the browser's native media controls.

Q5. What does poster do?#

Specifies an image shown as the video's poster frame before playback.

Q6. Why might autoplay fail?#

Browsers commonly restrict autoplay, particularly when media is not muted.

Q7. What is playsinline?#

It requests inline playback on supported mobile environments rather than forcing a separate fullscreen-style experience.

Q8. What is <track>?#

It provides timed text tracks such as captions, subtitles, chapters, or other track data.

Q9. What is VTT?#

Web Video Text Tracks, commonly used for timed text files.

Q10. Why are captions important?#

They improve accessibility and allow people who cannot hear the audio to access the video's spoken and relevant audio information.

Q11. What is the difference between preload="none" and preload="metadata"?#

none hints that the browser should avoid preloading the media, while metadata allows loading metadata without necessarily loading the complete media resource.

Q12. Are <audio> and <video> void elements?#

No.

They can contain <source>, <track>, and fallback content.

58. Mini Project — Multimedia Gallery#

Create:

multimedia.html

with:

              Multimedia Gallery
 
────────────────────────────────────
 
1. Podcast
 
[ ▶ Audio Player ]
 
Read Transcript
 
2. HTML Tutorial
 
┌──────────────────────────────┐
│                              │
│          VIDEO               │
│                              │
└──────────────────────────────┘
 
[ ▶ Controls ]
 
Captions:
English
Hindi
 
3. Product Demo
 
┌──────────────────────────────┐
│         VIDEO                │
└──────────────────────────────┘
 
Product demonstration
 
4. Background Hero
 
Autoplay
Muted
Loop
Inline
Poster image

Try to use:

<audio>
<video>
<source>
<track>
<figure>
<figcaption>

and appropriate accessibility features.

59. Chapter 12 — Final Mental Model#

The multimedia architecture is:

                    MEDIA
                      │
             ┌────────┴────────┐
             │                 │
           AUDIO              VIDEO
             │                 │
          source              source
             │                 │
             │               track
             │                 │
             └────────┬────────┘
                      │
                 Browser
                      │
              Native playback

For professional multimedia:

Video
 │
 ├── Appropriate source
 ├── Poster
 ├── Controls
 ├── Captions
 ├── Responsive sizing
 ├── Performance strategy
 └── Transcript when appropriate

The key principle is:

Multimedia isn't just about making media play; professional HTML also considers accessibility, compatibility, performance, and user control.

Next Chapter#

Chapter 13 — Embedded Content#

Next we'll learn how HTML can embed external content and other browsing contexts:

• <iframe>
• Embedding YouTube videos
• Maps
• External websites
• PDFs
• <embed>
• <object>
• <picture> vs embedded content
• sandbox
• allow
• loading
• referrerpolicy
• iframe security
• Same-origin considerations
• Responsive iframes
• postMessage
• Third-party content risks
• Embedding external applications
• Real-world embed architecture
• Common security mistakes
• Interview questions