HTML

HTML

๐ŸŽฌ HTML Multimedia

๐Ÿ”น 1. What is HTML Media / Multimedia?

Modern web pages are not limited to just text and images.

They can also include audio, video, animations, and other interactive media.

๐Ÿ‘‰ All these types of content are called multimedia.

With HTML5, new elements were introduced that allow browsers to directly handle media files without extra plugins.

The most important ones are:

  1. <video> โ†’ for videos
  2. <audio> โ†’ for sound

๐Ÿ”น 2. Supported Formats & Compatibility

Not every browser supports every media format, so developers usually provide multiple formats for better compatibility.

๐Ÿ‘‰ Common formats:

  1. Video:
  2. MP4 (most widely supported)
  3. WebM
  4. Ogg
  1. Audio:
  2. MP3 (most common)
  3. WAV
  4. Ogg

๐Ÿ‘‰ File extensions like .mp4, .mp3, .wav usually indicate the format.

๐Ÿ”น 3. <video> and <audio> Tags

๐ŸŽž๏ธ Video Example

HTML

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    Your browser does not support the video tag.
</video >

๐Ÿ‘‰ Key points:

  1. controls adds play, pause, volume, and timeline controls
  2. Multiple <source> elements allow fallback formats
  3. If none are supported, the text inside <video> is shown

๐Ÿ”น 4. Advanced Usage Examples

๐ŸŽฅ Example A: Auto-Play & Loop Video

HTML

<video width="400" height="225" autoplay loop muted>
    <source src="sample.mp4" type="video/mp4">
    <source src="sample.webm" type="video/webm">
    Your browser does not support the video tag.
</video >

๐Ÿ‘‰

  1. autoplay โ†’ starts automatically
  2. loop โ†’ repeats continuously
  3. muted โ†’ starts without sound (required for autoplay in most browsers)

๐ŸŽ›๏ธ Example B: Controlling Video with JavaScript

HTML

<video id="myVid" width="320" height="180">
    <source src="clip.mp4" type="video/mp4">
    <source src="clip.webm" type="video/webm">
</video>

<button id="btnPlay">Play / Pause</button>
<p id="status">Stopped</p>

<script>

    const video = document.getElementById("myVid");
    const btn = document.getElementById("btnPlay");
    const status = document.getElementById("status");

    btn.addEventListener("click", () => {
        if (video.paused) {
            video.play();
            status.innerText = "Playing";
        } else {
            video.pause();
            status.innerText = "Paused";
        }
    });
</script>

๐Ÿ‘‰

  1. play() and pause() control playback
  2. You can update UI elements like status text
  3. Enables custom controls (buttons, sliders, etc.)

๐ŸŽฌ Example C: Background Video

HTML

<video autoplay loop muted playsinline id="bgvid"
style="position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%;">
    <source src="background.mp4" type="video/mp4">
    <source src="background.webm" type="video/webm">
</video>

<div style="position: relative; z-index: 1;">
    <h1>Page Title</h1>
    <p>Text content goes here.</p>
</div>

๐Ÿ‘‰

  1. position: fixed โ†’ keeps video in the background
  2. min-width / min-height โ†’ covers the full screen
  3. z-index โ†’ ensures text appears above the video
  4. playsinline โ†’ prevents fullscreen on mobile

  • Summary

  • HTML5 allows embedding media directly using <video> and <audio>
  • No external plugins are required
  • Multiple formats ensure browser compatibility
  • JavaScript enables full control over playback

  • Common uses:

  • Video players ๐ŸŽฅ
  • Music/audio playback ๐ŸŽต
  • Background media ๐ŸŽฌ
  • Interactive experiences ๐ŸŽฎ
  • ๐Ÿ‘‰ Multimedia is a key part of modern web design and user experience.

Html Svg