Multimedia in HTML: Audio, Video, and Iframes

Siddharth Sharma
Jan 30
4 min read

Modern websites sirf text aur images tak limited nahi hain. Aajkal websites par Audio, Video, aur dusri websites ka content (jaise YouTube videos or Google Maps) embed karna bahut common hai. HTML5 ne multimedia content ko web pages par add karna bahut aasaan bana diya hai.

Is section mein hum 3 main topics cover karenge:

Embedding Audio (<audio> tag)
Embedding Video (<video> tag)
Embedding External Content (<iframe> tag)

1. Embedding Audio (<audio>)

Pehle web browsers mein audio play karne ke liye external plugins (jaise Flash Player) ki zarurat padti thi. Lekin HTML5 ne standard <audio> tag introduce kiya, jisne audio embedding ko bahut simple bana diya.

The <audio> Tag

<audio> tag ka use web page par sound files (songs, music, podcasts) play karne ke liye kiya jata hai.

controls Attribute: Yeh attribute sabse important hai. Agar aap controls attribute nahi likhenge, toh user ko audio player (Play/Pause button, Volume bar) dikhayi hi nahi dega aur audio play nahi hoga.
src Attribute: Yeh audio file ka path batata hai.

Basic Syntax:

HTML

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

Common Attributes:

autoplay: Page load hote hi audio apne aap play hona start ho jayega (Note: Modern browsers jaise Chrome isse block kar dete hain user experience ke liye).
loop: Audio khatam hone ke baad automatically dubara start (repeat) ho jayega.
muted: Audio play toh hoga lekin sound default mute rahegi.

2. Embedding Video (<video>)

Video content web ko engaging banata hai. HTML5 ka <video> tag bina kisi third-party software ke direct browser mein video play kar sakta hai.

The <video> Tag

Yeh tag video files ko display karne ke liye use hota hai. Iska structure bilkul <audio> tag jaisa hi hai, bas isme hum video ki width aur height bhi set kar sakte hain.

Basic Syntax:

HTML

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

Important Attributes:

controls: Play/Pause buttons, Volume, aur Full-screen option dikhane ke liye zaroori hai.
width & height: Video player ka size set karne ke liye.
poster: Jab tak video play nahi hota ya download ho raha hai, tab tak ek thumbnail image dikhane ke liye iska use hota hai.
- Example: poster="thumbnail.jpg"

3. The <iframe> Tag (Inline Frame)

Iframe ka full form hai Inline Frame. Yeh HTML ka ek bahut powerful feature hai.

Definition: <iframe> tag ka use karke hum apne web page ke andar ek nayi window bana sakte hain jisme dusra web page dikhaya ja sakta hai.
Real-world Use: Jab aap kisi website par YouTube Video ya Google Map dekhte hain, toh wo actually <iframe> ke andar hi chal raha hota hai.

Syntax and Attributes

HTML

<iframe src="https://www.wikipedia.org" width="100%" height="400"></iframe>

Key Attributes:

src: Us external page ka URL jo aap dikhana chahte hain.
width & height: Frame ka size define karne ke liye (Pixels ya Percentage mein).
title: Screen readers ke liye (Accessibility), taaki blind users samajh sakein ki frame mein kya hai.
frameborder: Border ko hatane ke liye frameborder="0" use kiya jata hai (CSS se bhi kar sakte hain).

Example: Embedding YouTube Video

YouTube videos ko directly <video> tag se play karna mushkil hota hai (server load ki wajah se). Isliye hum YouTube ka "Embed Code" use karte hain jo <iframe> hota hai.

YouTube video par jayen.
"Share" button par click karein.
"Embed" option select karein aur code copy karein.

Code Example:

HTML

<h3>My Favorite Song:</h3>
<iframe width="560" height="315" 
src="https://www.youtube.com/embed/VIDEO_ID" 
title="YouTube video player" 
allowfullscreen>
</iframe>

Summary Table (Difference)

Tag	Purpose (उद्देश्य)	Key Attributes
<audio>	Sound/Music play karne ke liye.	controls, autoplay, loop
<video>	Video clips play karne ke liye.	controls, width, height, poster
<iframe>	Dusra web page (Maps/YouTube) dikhane ke liye.	src, width, height, frameborder

User Note: Exam mein aksar <iframe> ka use case pucha jata hai (ki YouTube video kaise lagayein). Wahin <audio> aur <video> tags mein controls attribute likhna mat bhulna, warna output mein kuch nahi dikhega.

HTML Multimedia Example Code

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Multimedia in HTML</title>
    <style>
        /* Thoda design taaki output clean dikhe */
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f0f0f0;
        }
        .container {
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0px 0px 10px gray;
            max-width: 800px;
            margin: auto;
        }
        h2 {
            color: #333;
            border-bottom: 2px solid #ddd;
            padding-bottom: 10px;
        }
    </style>
</head>
<body>

<div class="container">
    <h1 style="text-align:center;">HTML Multimedia Demo</h1>

    <h2>1. Audio Player</h2>
    <p>Niche diye gaye player se audio play karein:</p>
    
    <audio controls>
        <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>

    <hr> <h2>2. Video Player</h2>
    <p>Yeh ek sample video hai:</p>

    <video width="400" height="300" controls>
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>

    <hr>

    <h2>3. Google Map (Using Iframe)</h2>
    <p>Niche Bhopal ka map embedded hai:</p>

    <iframe 
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d117325.86770241858!2d77.32915835973347!3d23.23126760670877!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x397c428f8fd68fbd%3A0x2155716d572d4f8!2sBhopal%2C%20Madhya%20Pradesh!5e0!3m2!1sen!2sin!4v1700000000000!5m2!1sen!2sin" 
        width="100%" 
        height="350" 
        style="border:0;" 
        allowfullscreen="" 
        loading="lazy">
    </iframe>

</div>

</body>
</html>

Code Explanation (कोड का विवरण)

Audio Tag (<audio>):
- मैंने controls attribute का use किया है ताकि Play/Pause buttons दिखाई दें।
- src में मैंने एक online sample file (horse.mp3) use की है ताकि code run करते ही audio play हो सके (internet on रखना)। अगर आपके computer में कोई song है, तो आप उसका नाम (e.g., mysong.mp3) भी लिख सकते हैं।
Video Tag (<video>):
- यहाँ width="400" set किया गया है ताकि video page पर बहुत बड़ा न दिखे।
- Sample video (mov_bbb.mp4) एक online cartoon clip है।
Iframe Tag (<iframe>):
- यहाँ मैंने Google Maps का embed code use किया है।
- width="100%" का मतलब है कि map container की पूरी चौड़ाई (width) ले लेगा।
- height="350" map की height fix करता है।

Tip: जब आप यह code run करेंगे, तो Audio और Video play करने के लिए Internet Connection की ज़रूरत होगी क्योंकि files online server से आ रही हैं। अगर files आपके computer (local folder) में होंगी, तो internet की ज़रूरत नहीं पड़ेगी।

Multimedia in HTML: Audio, Video, and Iframes

1. Embedding Audio (<audio>)

The <audio> Tag

2. Embedding Video (<video>)

The <video> Tag

3. The <iframe> Tag (Inline Frame)

Syntax and Attributes

Example: Embedding YouTube Video

Summary Table (Difference)

HTML Multimedia Example Code

Code Explanation (कोड का विवरण)

Recent Posts

Comments