audio & video Tags
<video src="..." controls> ek video player dikhata hai (controls = play/pause/volume UI). <audio> same concept, audio ke liye. Multiple <source> elements se alag formats de sakte ho (browser compatibility ke liye) — browser jo bhi format support karta hai use use kar lega.
Common attributes: controls (UI dikhao), autoplay (khud shuru ho jaaye — usually muted ke saath hi allowed browsers mein), loop (repeat), muted (sound off).
<video controls width="600">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
Tumhara browser video tag support nahi karta.
</video>
<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
</audio>
<!-- Autoplay — usually muted ke saath hi allowed: -->
<video autoplay muted loop>
<source src="background.mp4" type="video/mp4">
</video>- video/audio = native media players, koi plugin zaroori nahi
- Multiple source elements = format fallbacks
- autoplay usually sirf muted ke saath allowed hai
poster attribute video load hone se pehle ek preview image dikhata hai. preload browser ko hint deta hai kitna video pehle se download karna hai — "none" (kuch nahi), "metadata" (sirf duration/size), "auto" (jitna ho sake).
<video controls poster="thumbnail.jpg" preload="metadata">
<source src="movie.mp4" type="video/mp4">
</video><track> element video ke andar captions/subtitles add karta hai (WebVTT format file se) — accessibility (deaf/hard-of-hearing users) aur multi-language support dono ke liye important.
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="captions-en.vtt" kind="captions" srclang="en" label="English">
<track src="captions-hi.vtt" kind="captions" srclang="hi" label="Hindi">
</video>