HTML Video
In this page:
<video src="video-url" width="width" height="height" controls>
Fallback text
</video>Video को Natively Embed करना
किसी वीडियो को embed करने के लिए, आप video टैग का उपयोग करते हैं। इस कंटेनर के अंदर, आप अपनी वीडियो फाइल paths की ओर इशारा करने वाले source एलिमेंट्स रखते हैं, जिससे ब्राउज़र को मिलने वाला पहला compatible फॉर्मेट चुनकर चलाने की सुविधा मिलती है।
- यह सुनिश्चित करने के लिए कि आपके वीडियो सभी डिवाइसेज़ पर चलें, कई फाइल फॉर्मेट (जैसे WebM और MP4) उपलब्ध कराएं।
- Accepted attributes:
- src — video file URL
- controls — boolean
- width / height — pixels
- poster — image URL shown before playback
- autoplay / loop / muted — booleans
- preload — none | metadata | auto
उदाहरण: Embedding Video Natively
<video controls>
<source src="movie.mp4" type="video/mp4">
</video>Playback Controls (controls)
डिफ़ॉल्ट रूप से, ब्राउज़र वीडियो फाइलों को एक स्टैटिक image की तरह दिखाते हैं जब तक आप controls attribute शामिल न करें। controls attribute ब्राउज़र को play, pause, वॉल्यूम एडजस्ट करने, और fullscreen मोड के लिए स्टैण्डर्ड सिस्टम बटन दिखाने के लिए कहता है।
- जब तक आप कोई मौन बैकग्राउंड वीडियो लूप डिज़ाइन नहीं कर रहे, हमेशा controls attribute शामिल करें।
- Accepted values:
- controls — boolean attribute (present or controls="")
- Shows play, pause, seek, volume, fullscreen
- controlslist — nodownload | nofullscreen | noremoteplayback (Chromium)
उदाहरण: Playback Controls (controls)
<video src="movie.mp4" controls></video>Video को Auto-play और Mute करना
मॉडर्न ब्राउज़र यूज़र अनुभव की सुरक्षा के लिए साउंड ऑन के साथ वीडियो फाइलों को auto-play होने से रोकते हैं। पेज लोड होते ही वीडियो को अपने आप चलाने के लिए, आपको autoplay और muted दोनों attributes शामिल करने होंगे।
- अपने पेजों के लिए एक आकर्षक बैकग्राउंड बैनर के रूप में मौन, लूप होने वाले वीडियो का उपयोग करें।
- Accepted attributes:
- autoplay — boolean; usually needs muted
- muted — boolean
- loop — boolean
- playsinline — boolean
उदाहरण: Auto-playing and Muting Video
<video src="movie.mp4" autoplay muted></video>Poster Thumbnail Images
आपका वीडियो चलना शुरू होने से पहले या डाउनलोड होने के दौरान, प्लेयर ब्लॉक खाली और सूना दिख सकता है। poster attribute आपको प्लेयर ब्लॉक में दिखाने के लिए एक कस्टम placeholder image (जैसे thumbnail) तय करने देता है।
- यूज़र का ध्यान खींचने और अपने वीडियो के विषय को दर्शाने के लिए एक हाई-क्वालिटी poster image का उपयोग करें।
- Accepted values:
- poster — URL of an image file
उदाहरण: Poster Thumbnail Images
<video src="movie.mp4" controls poster="thumbnail.jpg"></video>track से Subtitles जोड़ना
अपने वीडियो को सुनने में असमर्थ यूज़र और साउंड म्यूट करके वीडियो देखने वाले लोगों के लिए accessible बनाने के लिए, आप track एलिमेंट का उपयोग करके subtitles जोड़ सकते हैं।
यह एलिमेंट एक स्टैण्डर्ड WebVTT (.vtt) टेक्स्ट फाइल को संदर्भित करता है जो स्क्रीन पर टाइम्ड टेक्स्ट कैप्शन दिखाती है।
- subtitles को अपने आप दिखाने के लिए अपने track टैग पर default attribute सेट करें।
- Accepted attributes:
- kind — subtitles | captions | descriptions | chapters | metadata
- src — URL of the .vtt file
- srclang — language code, e.g. en
- label — text shown in the track menu
- default — boolean
उदाहरण: Adding Subtitles with track
<video src="movie.mp4" controls>
<track src="captions.vtt" kind="subtitles" srclang="en" default>
</video>Mobile Video के लिए playsinline
कई mobile ब्राउज़र पर, खासकर iOS Safari पर, वीडियो चलना शुरू होते ही अपने आप fullscreen में फैल जाते हैं जब तक आप playsinline attribute न जोड़ें।
यह attribute ब्राउज़र को बताता है कि वीडियो को पेज में उसी जगह embedded रखकर चलाए, जो autoplay होने वाले बैकग्राउंड वीडियो या inline previews के लिए ज़रूरी है।
- mobile-friendly वीडियो embeds पर हमेशा autoplay और muted के साथ playsinline भी शामिल करें, वरना fullscreen में अचानक जाना यूज़र को चौंका देगा।
- Accepted values:
- playsinline — boolean attribute
- Plays inline instead of forcing fullscreen on iOS
उदाहरण: playsinline for Mobile Video
<video src="movie.mp4" autoplay muted playsinline></video>कई Source फॉर्मेट (mp4, webm, ogg)
हर ब्राउज़र हर वीडियो फॉर्मेट को सपोर्ट नहीं करता। video टैग के अंदर कई source एलिमेंट्स लिस्ट करके, जिनमें से हर एक अलग फाइल फॉर्मेट की ओर इशारा करता है, ब्राउज़र अपने आप पहला ऐसा फॉर्मेट चुन लेता है जिसे वह चला सकता है और बाकी को अनदेखा कर देता है।
- कम से कम mp4 और webm उपलब्ध कराएं — साथ में ये ज़्यादातर मॉडर्न ब्राउज़र को कवर कर लेते हैं, जिसमें mp4 एक भरोसेमंद fallback के रूप में काम करता है।
- Accepted attributes:
- source src — file URL
- source type — video/mp4 | video/webm | video/ogg
- source media — media query (optional)
उदाहरण: Multiple Source Formats (mp4, webm, ogg)
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<source src="movie.ogg" type="video/ogg">
</video>Video Accessibility की सर्वोत्तम प्रथाएं
Accessible वीडियो का मतलब है बहरे या कम सुनने वाले लोगों के लिए captions उपलब्ध कराना, screen reader यूज़र के लिए एक text transcript देना, और साउंड के साथ autoplay पर कभी भरोसा न करना, जो कुछ यूज़र के लिए भ्रमित करने वाला या परेशानी पैदा करने वाला भी हो सकता है।
captions के लिए track एलिमेंट के साथ मिलकर, ये प्रथाएं वीडियो कंटेंट को सबके लिए उपयोगी बनाती हैं।
उदाहरण: Video Accessibility Best Practices
<video src="movie.mp4" controls muted>
<track src="captions.vtt" kind="captions" srclang="en" default>
</video>Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: