Get Started 🚀
← Back to Audio & Video Chapter
Media Types

🎬 Video Element — Video Play Karo

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

<video> tag video player embed karta hai. Jaise mini YouTube player tumhare page mein — par tumhari apni video files use karke. MP4, WebM, OGG formats support karta hai.

Audio se zyada attributes: width/height layout shift prevent karta hai (CLS), poster play hone se pehle thumbnail dikhata hai, controls phir bhi zaroori hai. Bina controls ke video invisible hai.

🛺
VCR se HTML5: Purane din: VCR, cables, TV. Phir: DVD player. Ab: ek <video> tag. Apna video player, koi third-party service nahi chahiye.

Code Example

HTML — Video Element — Video Play Karo
<!-- Basic video -->
<video controls src="charminar.mp4" width="640" height="360"></video>

<!-- Poster thumbnail ke saath -->
<video 
  controls 
  poster="charminar-thumb.jpg"
  width="640" 
  height="360"
>
  <source src="charminar.mp4" type="video/mp4">
  <source src="charminar.webm" type="video/webm">
  Aapka browser video support nahi karta.
</video>

<!-- Saare useful attributes -->
<video 
  controls
  poster="thumbnail.jpg"
  width="1280"
  height="720"
  preload="metadata"
>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

<!-- Autoplay muted (background video) -->
<video 
  autoplay 
  muted 
  loop 
  playsinline
  width="100%"
  height="auto"
>
  <source src="background.mp4" type="video/mp4">
</video>
controlsPlay/pause/volume/fullscreen/seek dikhata hai — ZAROORI
width/heightDisplay dimensions — CLS (layout shift) prevent karta hai
poster="..."Video play hone se pehle thumbnail image
<source>Multiple formats — browser pehla supported pick karta hai
preload="metadata"Sirf duration/size load karo, full video nahi
autoplay muted loopBackground video — silent, looping
playsinlineiOS pe inline play karo (default fullscreen nahi)
Fallback text<video> support na karne wale browsers mein dikhta hai

✅ When to Use

  • Product demo videos
  • Tutorial recordings
  • Hero background videos (autoplay muted)
  • Video galleries
  • Course lecture videos

❌ When NOT to Use

  • YouTube videos ke liye (iframe embed use karo)
  • Jab advanced features chahiye jaise chapters (specialized player use karo)
  • Bina compression ke badi videos (page bahut slow hogi)
💡
Hamesha width AUR height attributes add karo chahe CSS resize kare. Yeh CLS prevent karta hai — video load hone pe page nahi hilta. Google low CLS wali pages ko zyada rank karta hai. Hero videos ke liye autoplay muted loop playsinline use karo.
← Back to Audio & Video Chapter