HTML <video> element की मदद से web page पर video files embed करने की सुविधा देता है।
HTML5 से पहले video चलाने के लिए external plugins की ज़रूरत होती थी, लेकिन अब browser native support देता है।
HTML video responsive, accessible और plugin-free होता है।
video Element
<video> element video content को define करता है।
<video width="400" controls>
<source src="movie.mp4" type="video/mp4">
</video>
Browser video play, pause और volume controls show करता है।
video Attributes
controls video controls दिखाता हैautoplay page load होते ही video play करता हैloop video repeat करता हैmuted video को mute करता हैposter video load होने से पहले thumbnail image दिखाता है
<video width="400" controls poster="thumb.jpg">
<source src="movie.mp4" type="video/mp4">
</video>
autoplay और muted का relation
Modern browsers autoplay को तभी allow करते हैं जब video muted हो।
<video autoplay muted>
Multiple Video Sources
Different browsers different formats support करते हैं, इसलिए multiple sources देना best practice है।
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
Browser first supported format play करता है।
Supported Video Formats
MP4
WebM
Ogg
MP4 सबसे ज़्यादा widely supported format है।
Video Size Control
Width और height attributes से size set किया जा सकता है।
<video width="640" height="360" controls>
CSS से responsive video बनाना बेहतर तरीका है।
video {
max-width: 100%;
height: auto;
}
Video Controls JavaScript से
JavaScript की मदद से video control किया जा सकता है।
var vid = document.querySelector("video");
vid.play();
vid.pause();
HTML track Element
Subtitles और captions add करने के लिए <track> element use होता है।
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="captions.vtt" kind="captions" srclang="en" label="English">
</video>
यह accessibility के लिए बहुत important है।
Video Poster Image
poster attribute video load होने से पहले image show करता है।
<video poster="preview.jpg" controls>
Video Preload Attribute
preload browser को बताता है कि video data कैसे load करना है।
<video preload="metadata" controls>
Values हो सकती हैं: auto, metadata, none
HTML Video Best Practices
Autoplay audio avoid करें
Multiple formats provide करें
Subtitles जरूर दें
Optimized video files use करें
HTML Video Summary
HTML video element native video playback देता है
Plugins की ज़रूरत नहीं होती
Multiple sources browser compatibility बढ़ाते हैं
Accessibility और performance पर ध्यान देना जरूरी है