HTML वीडियो
मीडिया अवलोकन ने आपको कई परिवारों की ओर इशारा किया। यह सेशन एक पर केंद्रित है: वह video एलिमेंट जो आप स्वयं होस्ट करते हैं — क्लिप और डेमो के लिए। आगंतुकों को controls से प्ले/पॉज़ UI दें, न कि आश्चर्यजनक ऑटो-स्टार्ट ध्वनि से।
video क्या करता है
video ब्राउज़र से मूवी फ़ाइल लाने और पेज पर दिखाने को कहता है। आप src से एक फ़ाइल इंगित कर सकते हैं, या कई <source> चाइल्ड सूचीबद्ध कर सकते हैं ताकि ब्राउज़र समर्थित प्रारूप चुन सके। वैकल्पिक एट्रिब्यूट आकार आरक्षित करते हैं (width / height), प्ले से पहले स्थिर फ़्रेम दिखाते हैं (poster), और नेटिव नियंत्रण दिखाते हैं।
सीधा उत्तर
<video controls src="movie.mp4"> इस्तेमाल करें या कई प्रारूपों के लिए <source> चाइल्ड नेस्ट करें। प्ले से पहले पूर्वावलोकन फ़्रेम के लिए poster छवि जोड़ें। जो एजेंट मीडिया नहीं चला सकते उनके लिए video के अंदर छोटा फ़ॉलबैक टेक्स्ट (और वैकल्पिक रूप से डाउनलोड लिंक) शामिल करें। संपीड़ित, उचित आकार की फ़ाइलें पसंद करें।
controls के साथ सरल वीडियो
एक अकेला MP4 प्लस controls और चौड़ाई कई शिक्षण पेजों के लिए पर्याप्त है।
controls के साथ सरल वीडियो
html<video controls width="480" src="media/demo.mp4">
Sorry, your browser does not support this video.
</video>सरल सैंपल पढ़ना
controlsब्राउज़र से प्ले/पॉज़ UI माँगता हैwidth="480"फ़ाइल लोड होते समय लेआउट स्थान आरक्षित करने में मदद करता हैsrcआपकेmediaफ़ोल्डर में मूवी फ़ाइल की ओर इशारा करता हैvideoके अंदर का टेक्स्ट तब फ़ॉलबैक सामग्री है जब एलिमेंट समर्थित नहीं है
कई स्रोत और एक poster
ब्राउज़र प्रारूप सुविधा में भिन्न होते हैं। type संकेतों के साथ WebM और MP4 सूचीबद्ध करना, प्लस एक poster स्थिर छवि, एक सामान्य व्यावहारिक पैटर्न है।
कई स्रोत और poster
html<video controls width="480" poster="media/demo-poster.jpg">
<source src="media/demo.webm" type="video/webm">
<source src="media/demo.mp4" type="video/mp4">
Download the <a href="media/demo.mp4">MP4</a> instead.
</video>मल्टी-स्रोत सैंपल पढ़ना
posterप्लेबैक शुरू होने तक पूर्वावलोकन छवि दिखाता है- प्रत्येक
sourceएक फ़ाइल और MIMEtypeनाम देता है - ब्राउज़र वह पहला स्रोत चुनता है जिसे वह चला सकता है
- अंदर का डाउनलोड लिंक तब मदद करता है जब प्लेबैक उपलब्ध नहीं है
फ़ाइल आकार और प्रारूप
विशाल कैमरा एक्सपोर्ट धीमे नेटवर्क पर अटक जाते हैं। शिक्षण आवश्यकता से मेल खाता वेब-आकार MP4 (और वैकल्पिक रूप से WebM) निर्यात करें — पाठ पेज पर छोटी डेमो मल्टी-गीगाबाइट मास्टर से बेहतर हैं। दिन एक पर हर कंटेनर की ज़रूरत नहीं; पहले एक स्पष्ट MP4 चालू करें, फिर अगर आपके दर्शकों को चाहिए तो दूसरा प्रारूप जोड़ें।
Autoplay: पहले controls सीखें
ध्वनि के साथ autoplay अक्सर ब्लॉक होता है और आमतौर पर बुरा शिष्टाचार है। मार्केटिंग हीरो के लिए म्यूट autoplay ट्रिक्स मौजूद हैं, लेकिन शुरुआती को पहले controls और उपयोगकर्ता-शुरू प्लेबैक में महारत हासिल करनी चाहिए। बाद में जब autoplay चाहिए, ब्राउज़र नीतियाँ ध्यान से पढ़ें और पहुँच-योग्य पॉज़ पथ रखें।
कैप्शन और पहुँच-योग्यता (आदत)
अगर बोली गई सामग्री कुछ महत्वपूर्ण सिखाती है, कैप्शन या ट्रांसक्रिप्ट की योजना बनाएँ — भले ही पूर्ण track एलिमेंट बाद के पास में जोड़ें। टॉकिंग-हेड पाठ का एकमात्र पहुँच-योग्य सारांश केवल poster छवि पर निर्भर न रहें।
चौड़ाई, ऊँचाई और लेआउट
width सेट करना (और जब आप आस्पेक्ट रेशियो जानते हैं तो मिलान वाली height) वीडियो मेटाडेटा लोड होते समय लेआउट जंप कम करता है। बेमेल संख्याओं से खींचना गलत दिखता है; छवियों की तरह वास्तविक आस्पेक्ट रेशियो ध्यान में रखें।
अपने एडिटर में अभ्यास
mediaफ़ोल्डर में एक छोटा.mp4रखें।- इसे
video+controls+ उचित चौड़ाई से एम्बेड करें। - एलिमेंट के अंदर फ़ॉलबैक टेक्स्ट जोड़ें।
- वैकल्पिक रूप से
posterछवि और दूसराsourceप्रारूप जोड़ें। - पेज खोलें, प्ले और पॉज़ करें, फिर अगर संभव हो नेटवर्क थ्रॉटल से परीक्षण करें — देखें क्यों फ़ाइल आकार मायने रखता है।
आसान गलतियाँ
controlsन होना ताकि उपयोगकर्ता आसानी से न चला सकें- धीमे नेटवर्क पर अटकने वाली विशाल असंपीड़ित फ़ाइलें भेजना
- फ़ॉलबैक टेक्स्ट या डाउनलोड लिंक भूलना
- मूल बातें समझने से पहले ध्वनि के साथ autoplay की ओर भागना
imgकी तरहvideoपरaltलगाना (इसके बजाय कैप्शन/ट्रांसक्रिप्ट और दृश्य वर्णन इस्तेमाल करें)- होस्टेड YouTube एम्बेड (
iframe) को स्वयं-होस्टेडvideoफ़ाइलों से भ्रमित करना
सारांश
videoआपके होस्ट किए मूवी फ़ाइलें एम्बेड करता है- प्ले UI के लिए
controlsइस्तेमाल करें - कई
sourceटैग प्रारूप समर्थन सुधारते हैं posterप्ले से पहले पूर्वावलोकन फ़्रेम दिखाता है- संपीड़ित फ़ाइलें पसंद करें और आश्चर्यजनक autoplay ध्वनि से बचें
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी