HTML Multimedia Tags Kya Hote Hain?

HTML Multimedia ka Introduction

HTML Multimedia ka matlab hai web pages mein audio, video, aur interactive content ka use karna. Yeh elements web page ko visually appealing aur engaging banane mein madad karte hain. HTML5 ke aane se, multimedia content ko bina kisi external plugin (jaise Flash) ke direct browser me add karna bohot aasan ho gaya hai.

1. The <audio> Tag

HTML5 ka <audio> tag web pages mein audio files ko embed karne ke liye use hota hai. Is tag ka use karke hum users ko music, voice recordings, ya background sounds sunane ka option de sakte hain.

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

Common Attributes:

• controls: Audio player ke controls (play, pause, volume) dikhata hai.
• autoplay: Page load hote hi audio ko automatically play karta hai (Aksar browsers ise block kar dete hain).
• loop: Audio khatm hone par use fir se shuru kar deta hai.
• muted: Audio ko by default mute rakhta hai.

2. The <video> Tag

<video> tag web pages mein videos embed karne ke liye use hota hai. Yeh tag browser ke andar hi video playback support karta hai.

<video width="400" controls poster="/images/poster.png">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

Common Attributes:

• controls: Video player ke controls dikhata hai.
• width & height: Player ka size set karte hain.
• poster: Video load hone se pehle dikhne wali preview image.
• autoplay, loop, muted: Yeh attributes audio tag ki tarah hi kaam karte hain.

3. The <source> Tag

<source> tag ka use <audio> aur <video> elements ke andar multiple file formats provide karne ke liye hota hai. Isse browser compatibility badhti hai, kyunki agar browser ek format (e.g., .mp4) support nahi karta, toh woh doosra format (e.g., .webm) try kar sakta hai.

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Sorry, your browser doesn't support embedded videos.
</video>

4. Subtitles aur Captions (<track>)

<track> tag ka use video ke saath subtitles, captions, ya descriptions add karne ke liye hota hai. Yeh accessibility aur global audience ke liye bohot zaroori hai. Iske liye WebVTT (.vtt) file format use hota hai.

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

kind Attribute Values:

• subtitles: Foreign language translation.
• captions: Transcription of the dialogue and sound effects.
• descriptions: Description of visual content for visually impaired users.

5. YouTube Videos Embed Karna (<iframe>)

Kisi doosre webpage (jaise YouTube ya Google Maps) ko apne page ke andar embed karne ke liye <iframe> tag ka use hota hai. YouTube video embed karne ke liye, aap video ke neeche 'Share' button par click karein, 'Embed' option select karein, aur wahan se mile code ko copy-paste karein.

<iframe 
  width="560" 
  height="315" 
  src="https://www.youtube.com/embed/VIDEO_ID" 
  title="YouTube video player" 
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
  allowfullscreen>
</iframe>

Yahan VIDEO_ID ko aapko apne YouTube video ki ID se replace karna hoga.

Key Takeaways

• <audio> aur <video> tags se media content embed karna aasan hai.
• controls attribute user ko playback control karne ki suvidha deta hai.
• <source> tag ka use karke multiple formats provide karein taaki cross-browser compatibility badhe.
• <track> tag accessibility ke liye subtitles aur captions add karne me madad karta hai.
• <iframe> ka use third-party content jaise YouTube videos ko embed karne ke liye hota hai.