आपने वेब के लिए सही तरीके से एक वीडियो फ़ाइल तैयार की है. आपने इसे सही डाइमेंशन और सही रिज़ॉल्यूशन दिया हो. आपने अलग-अलग ब्राउज़र के लिए अलग-अलग WebM और MP4 फ़ाइलें भी बनाई हैं.
आपका वीडियो सभी लोग देख पाएं, इसके लिए आपको अब भी उसे किसी वेब पेज में जोड़ना होगा. ऐसा करने के लिए,
दो एचटीएमएल एलिमेंट को जोड़ना ज़रूरी है: <video> एलिमेंट और
<source> एलिमेंट. इन टैग के बारे में बुनियादी बातें जानने के साथ-साथ, इस लेख में उन एट्रिब्यूट के बारे में भी बताया गया है जिन्हें जोड़ने से आपको उपयोगकर्ताओं को बेहतर अनुभव देने के लिए टैग में जोड़ना चाहिए.
एक फ़ाइल तय करना
हमारा सुझाव है कि आप वीडियो एलिमेंट का इस्तेमाल न करें. हमेशा
नीचे बताए गए तरीके से type एट्रिब्यूट का इस्तेमाल करें. ब्राउज़र इसका इस्तेमाल यह तय करने के लिए करता है कि
यह दी गई वीडियो फ़ाइल चला सकता है या नहीं. अगर ऐसा नहीं हो सकता, तो शामिल किया गया टेक्स्ट दिखता है.
<video src="chrome.webm" type="video/webm">
<p>Your browser cannot play the provided video file.</p>
</video>
एक से ज़्यादा फ़ाइल फ़ॉर्मैट बताएं
मीडिया फ़ाइल की बुनियादी बातों से याद रखें कि सभी ब्राउज़र पर एक जैसे वीडियो फ़ॉर्मैट काम नहीं करते. अगर उपयोगकर्ता के ब्राउज़र में उनमें से किसी एक फ़ॉर्मैट पर काम नहीं करता, तो <source> एलिमेंट को फ़ॉलबैक के तौर पर कई फ़ॉर्मैट तय करने की सुविधा मिलती है.
यहां दिए गए उदाहरण में, एम्बेड किया गया वीडियो बनाया गया है. इसका इस्तेमाल इस लेख में, उदाहरण के तौर पर किया गया है.
<video controls>
<source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm" type="video/webm">
<source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.mp4" type="video/mp4">
<p>Your browser cannot play the provided video file.</p>
</video>
आपको <source> टैग इवेंट में हमेशा type एट्रिब्यूट जोड़ना चाहिए. हालांकि, यह ज़रूरी नहीं है. इससे यह पक्का होता है कि ब्राउज़र सिर्फ़ वही फ़ाइल डाउनलोड करे
जिसे चलाया जा सकता हो.
खास तौर पर, मोबाइल पर अलग-अलग एचटीएमएल या सर्वर-साइड स्क्रिप्टिंग दिखाने के इस तरीके के कई फ़ायदे हैं:
- फ़ॉर्मैट को अपनी पसंद के हिसाब से क्रम में लगाया जा सकता है.
- क्लाइंट-साइड स्विच करने की सुविधा से कॉन्टेंट दिखने में लगने वाला समय कम हो जाता है; कॉन्टेंट पाने के लिए सिर्फ़ एक अनुरोध किया जाता है.
- उपयोगकर्ता-एजेंट की पहचान करने वाले सर्वर-साइड सपोर्ट डेटाबेस के मुकाबले, ब्राउज़र को फ़ॉर्मैट चुनने देना आसान, तेज़, और ज़्यादा भरोसेमंद होता है.
- हर फ़ाइल सोर्स के टाइप को बताने से नेटवर्क परफ़ॉर्मेंस बेहतर होती है. फ़ॉर्मैट को "स्निफ़" करने के लिए, ब्राउज़र वीडियो का कुछ हिस्सा डाउनलोड किए बिना भी वीडियो का सोर्स चुन सकता है.
ये समस्याएं खास तौर पर, मोबाइल पर काम करते समय बेहद अहम हो जाती हैं. ऐसा तब होता है, जब बैंडविड्थ और इंतज़ार का समय बहुत ज़्यादा हो और उपयोगकर्ता को धैर्य बनाए रखना मुश्किल हो. type एट्रिब्यूट को हटाने से, परफ़ॉर्मेंस पर असर पड़ सकता है. ऐसा तब होता है, जब ऐसे कई सोर्स हों जिनके लिए इस्तेमाल नहीं किया जा सकता.
कुछ ऐसे तरीके हैं जिनसे आप ज़्यादा से ज़्यादा जानकारी हासिल कर सकते हैं. Geeks के लिए डिजिटल मीडिया प्राइमर देखें और जानें कि वीडियो और ऑडियो वेब पर कैसे काम करते हैं. DevTools में रिमोट डीबगिंग का इस्तेमाल करके भी, टाइप एट्रिब्यूट और टाइप एट्रिब्यूट के बिना, नेटवर्क गतिविधि की तुलना की जा सकती है.
आर्ट ट्रैक के शुरू होने और खत्म होने के समय की जानकारी देना
बैंडविड्थ बचाएं और अपनी साइट को ज़्यादा रिस्पॉन्सिव बनाएं: वीडियो एलिमेंट में, शुरू और खत्म होने का समय जोड़ने के लिए, मीडिया फ़्रैगमेंट का इस्तेमाल करें.
मीडिया फ़्रैगमेंट का इस्तेमाल करने के लिए, मीडिया यूआरएल में #t=[start_time][,end_time] जोड़ें. उदाहरण
के लिए, वीडियो को 5 से 10 सेकंड तक चलाने के लिए, यह बताएं:
<source src="video/chrome.webm#t=5,10" type="video/webm">
<hours>:<minutes>:<seconds> में भी समय तय किया जा सकता है. उदाहरण के लिए,
#t=00:01:05 ने वीडियो को एक मिनट, पांच सेकंड पर शुरू किया. वीडियो का सिर्फ़ पहला मिनट चलाने के लिए, #t=,00:01:00 तय करें.
इस सुविधा का इस्तेमाल, एक ही वीडियो पर कई व्यू डिलीवर करने के लिए किया जा सकता है. जैसे, डीवीडी में क्यू पॉइंट. इसके लिए, आपको कई फ़ाइलों को कोड में बदले बिना और उन्हें सर्व करने की ज़रूरत नहीं पड़ती.
यह सुविधा काम करे, इसके लिए आपके सर्वर पर रेंज अनुरोध काम करने चाहिए और यह क्षमता चालू होनी चाहिए. ज़्यादातर सर्वर, रेंज के अनुरोधों को डिफ़ॉल्ट रूप से चालू कर देते हैं. क्योंकि कुछ होस्टिंग सेवाएं उन्हें बंद कर देती हैं, इसलिए आपको इस बात की पुष्टि करनी चाहिए कि आपकी साइट पर फ़्रैगमेंट का इस्तेमाल करने के लिए, रेंज अनुरोध उपलब्ध हैं.
अच्छी बात यह है कि ब्राउज़र डेवलपर टूल में ऐसा किया जा सकता है. Chrome में, यह नेटवर्क पैनल में मौजूद है. Accept-Ranges हेडर देखें और पुष्टि करें कि
इसमें bytes लिखा है. इमेज में, मैंने इस हेडर के चारों ओर लाल रंग का एक बॉक्स बनाया है. अगर आपको वैल्यू के तौर पर bytes नहीं दिखता है, तो आपको अपने होस्टिंग प्रोवाइडर से संपर्क करना होगा.
पोस्टर इमेज शामिल करें
video एलिमेंट में पोस्टर एट्रिब्यूट जोड़ें, ताकि दर्शकों को एलिमेंट लोड होते ही पता चल जाए कि वीडियो डाउनलोड करना या वीडियो चलाना शुरू नहीं करना है.
<video poster="poster.jpg" ...>
…
</video>
अगर वीडियो src काम नहीं कर रहा है या दिया गया कोई भी वीडियो फ़ॉर्मैट काम नहीं करता है, तो पोस्टर को भी फ़ॉलबैक किया जा सकता है. पोस्टर इमेज का एक ही नुकसान अतिरिक्त फ़ाइल अनुरोध है, जिसके लिए बहुत कम बैंडविड्थ का इस्तेमाल होता है और उसे रेंडर करने की ज़रूरत होती है.
ज़्यादा जानकारी के लिए, इमेज को बेहतर तरीके से एन्कोड करें लेख देखें.
पक्का करें कि वीडियो कंटेनर ओवरफ़्लो न हों
जब वीडियो एलिमेंट, व्यूपोर्ट के लिए बहुत बड़े होते हैं, तो वे अपने कंटेनर से ओवरफ़्लो हो सकते हैं. इससे उपयोगकर्ता के लिए कॉन्टेंट देखना या कंट्रोल का इस्तेमाल नहीं कर पाना.
सीएसएस का इस्तेमाल करके, वीडियो के डाइमेंशन को कंट्रोल किया जा सकता है. अगर सीएसएस आपकी सभी ज़रूरतों को पूरा नहीं करती है, तो JavaScript लाइब्रेरी और FitVids जैसे प्लग इन आपकी मदद कर सकते हैं. यहां तक कि YouTube और दूसरे सोर्स के वीडियो के लिए भी ऐसा किया जा सकता है. माफ़ करें, इन संसाधनों से आपके नेटवर्क पेलोड का साइज़ बढ़ सकता है. इससे आपकी आय और उपयोगकर्ताओं के वॉलेट पर खराब असर पड़ सकता है.
इसके आसान इस्तेमाल के लिए, जैसा कि मैंने यहां बताया है, सीएसएस मीडिया क्वेरी का इस्तेमाल करें, ताकि व्यूपोर्ट डाइमेंशन के हिसाब से एलिमेंट का साइज़ तय किया जा सके. max-width:
100% आपका दोस्त है.
iframes में मौजूद मीडिया कॉन्टेंट (जैसे कि YouTube वीडियो) के लिए, रिस्पॉन्सिव (स्क्रीन के हिसाब से आकार बदलने वाले) तरीका आज़माएं. जैसे, जॉन सरडाकोस्की का बताया गया तरीका.
सीएसएस
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
एचटीएमएल
<div class="video-container">
<iframe
src="//www.youtube.com/embed/l-BA9Ee2XuM"
frameborder="0"
width="560"
height="315"
></iframe>
</div>
रिस्पॉन्सिव सैंपल की तुलना, बिना जवाब वाले वर्शन से करें. जैसा कि आपको दिख रहा है कि रिस्पॉन्स न देने वाला वर्शन अच्छा उपयोगकर्ता अनुभव नहीं है.
डिवाइस की स्क्रीन की दिशा
डेस्कटॉप मॉनिटर या लैपटॉप को डिवाइस ओरिएंटेशन की सुविधा इस्तेमाल करने में कोई समस्या नहीं होती, लेकिन मोबाइल डिवाइस और टैबलेट के लिए वेब पेज का डिज़ाइन बनाते समय इस बात पर ध्यान देना बहुत ज़रूरी होता है.
iPhone पर Safari पोर्ट्रेट और लैंडस्केप ओरिएंटेशन के बीच स्विच करने में अच्छे तरीके से काम करता है:
iPad और Android पर Chrome पर डिवाइस की स्क्रीन की दिशा तय करने में समस्याएं आ सकती हैं. उदाहरण के लिए, iPad पर लैंडस्केप ओरिएंटेशन में चल रहा वीडियो, अपनी पसंद के मुताबिक न दिखने पर ऐसा दिखेगा:
सीएसएस की मदद से width: 100% या max-width: 100% वीडियो को सेट करने पर, डिवाइस ओरिएंटेशन के लेआउट से जुड़ी कई समस्याएं हल हो सकती हैं.
वीडियो अपने-आप चलने की सुविधा
autoplay एट्रिब्यूट की मदद से यह कंट्रोल किया जाता है कि ब्राउज़र तुरंत वीडियो डाउनलोड करके उसे चलाएगा या नहीं. यह सही तरीके से काम करता है, यह प्लैटफ़ॉर्म और ब्राउज़र पर निर्भर करता है.
Chrome: यह कई बातों पर निर्भर करता है. इनमें यह भी शामिल है कि वीडियो को डेस्कटॉप पर देखा जा रहा है या नहीं और मोबाइल उपयोगकर्ता ने आपकी साइट या ऐप्लिकेशन को अपनी होमस्क्रीन पर जोड़ा है या नहीं. इसमें इनके अलावा, और भी चीज़ें शामिल हो सकती हैं. ज़्यादा जानकारी के लिए, वीडियो अपने-आप चलने के सबसे सही तरीके देखें.
Firefox: सभी वीडियो और आवाज़ को ब्लॉक कर देता है, लेकिन उपयोगकर्ताओं को सभी साइटों या कुछ खास साइटों के लिए इन पाबंदियों को हटाने की सुविधा देता है. ज़्यादा जानकारी के लिए, Firefox में मीडिया अपने-आप चलने की अनुमति दें या ब्लॉक करें देखें
Safari: इसके लिए पहले से ही उपयोगकर्ता जेस्चर की ज़रूरत पड़ी थी, लेकिन हाल के वर्शन में इस ज़रूरत को कम किया जा रहा है. ज़्यादा जानकारी के लिए, iOS के लिए <video> की नई नीतियां देखें.
अगर किसी प्लैटफ़ॉर्म पर अपने-आप वीडियो चलने की सुविधा उपलब्ध है, तो भी आपको यह देखना होगा कि इसे चालू करना सही है या नहीं:
- डेटा खर्च हो सकता है.
- उपयोगकर्ता की इच्छा से पहले मीडिया चलाना कि वह बैंडविथ और सीपीयू को बेहतर बना सके, जिससे पेज रेंडरिंग में देरी हो.
- हो सकता है कि लोग उस संदर्भ में हों जहां वीडियो या ऑडियो चलने से रुकावट पैदा होती है.
प्रीलोड
preload एट्रिब्यूट, ब्राउज़र को इस बारे में संकेत देता है कि कितनी जानकारी या कॉन्टेंट को पहले से लोड करना है.
| वैल्यू | ब्यौरा |
|---|---|
none |
ऐसा हो सकता है कि उपयोगकर्ता ने वीडियो न देखने का विकल्प चुना हो. इसलिए, वीडियो को पहले से लोड न करें. |
metadata |
मेटाडेटा (अवधि, डाइमेंशन, टेक्स्ट ट्रैक) पहले से लोड होना चाहिए, लेकिन वीडियो की संख्या कम से कम होनी चाहिए. |
auto |
तुरंत पूरा वीडियो डाउनलोड करना ज़रूरी माना जाता है. खाली स्ट्रिंग से भी एक जैसा नतीजा मिलता है. |
अलग-अलग प्लैटफ़ॉर्म पर preload एट्रिब्यूट का अलग-अलग असर होता है.
उदाहरण के लिए, Chrome डेस्कटॉप पर 25 सेकंड के वीडियो को बफ़र करता है, लेकिन iOS या Android पर कोई नहीं. इसका मतलब है कि मोबाइल पर वीडियो चलाने में देरी हो सकती है, जो डेस्कटॉप पर नहीं होती. ज़्यादा जानकारी के लिए, ऑडियो और वीडियो को पहले से लोड करके तेज़ी से चलाना या
Steve Souders का ब्लॉग देखें.
अब जब आपको अपने वेब पेज पर मीडिया जोड़ने का तरीका पता है, तो अब मीडिया सुलभता के बारे में जानें. यहां आपको सुनने में परेशानी होने पर या ऑडियो चलाते समय अपने वीडियो में कैप्शन जोड़ने होंगे.