इस पेज का अनुवाद Cloud Translation API से किया गया है.

<वीडियो> और <स्रोत> टैग

Derek Herman

Joe Medley

Sam Dutton

आपने वेब के लिए ठीक से वीडियो फ़ाइल तैयार कर ली है. आपने इसे सही आयाम और सही रिज़ॉल्यूशन दिया है. आपने अलग-अलग ब्राउज़र के लिए, अलग-अलग WebM और एमपी4 फ़ाइलें भी बनाई हैं.

आपका वीडियो सभी को दिखे, इसके लिए आपको अब भी इसे वेब पेज पर जोड़ना होगा. इसे सही तरीके से करने के लिए, दो एचटीएमएल एलिमेंट जोड़ने होंगे: <video> एलिमेंट और <source> एलिमेंट. इन टैग की बुनियादी बातों के अलावा, इस लेख में उन एट्रिब्यूट के बारे में भी बताया गया है जिन्हें आपको बेहतर उपयोगकर्ता अनुभव देने के लिए, टैग में जोड़ना चाहिए.

ध्यान दें: आपके पास हमेशा [YouTube] या [Vimeo] पर अपनी फ़ाइल अपलोड करने का विकल्प होता है. कई मामलों में, यह तरीका यहां बताए गए तरीके से बेहतर होता है. ये सेवाएं, आपके लिए फ़ॉर्मैटिंग और फ़ाइल टाइप बदलने की सुविधा देती हैं. साथ ही, वे आपके वेब पेज में वीडियो एम्बेड करने का तरीका भी बताती हैं. अगर आपको इसे खुद मैनेज करना है, तो आगे पढ़ें.

कोई एक फ़ाइल चुनना

हालांकि, हमारा सुझाव है कि आप वीडियो एलिमेंट का इस्तेमाल अकेले न करें. 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>

Glitch पर आज़माएं

ध्यान दें: पिछले उदाहरण में, controls एट्रिब्यूट को शामिल किया गया था. यह ब्राउज़र को उपयोगकर्ताओं को वीडियो चलाने की अनुमति देने के निर्देश देता है. इसमें आवाज़, वीडियो में आगे/पीछे जाना, कैप्शन चुनना, और वीडियो चलाना रोकने/फिर से चलाने जैसे कई काम शामिल हैं.

आपको <source> टैग इवेंट में हमेशा type एट्रिब्यूट जोड़ना चाहिए, भले ही यह ज़रूरी न हो. इससे यह पक्का होता है कि ब्राउज़र सिर्फ़ वही फ़ाइल डाउनलोड करेगा जिसे वह चला सकेगा.

अलग-अलग एचटीएमएल या सर्वर साइड स्क्रिप्टिंग के मुकाबले, इस तरीके के कई फ़ायदे हैं. खास तौर पर, मोबाइल पर:

फ़ॉर्मैट को प्राथमिकता के क्रम में रखा जा सकता है.
क्लाइंट-साइड स्विचिंग से इंतज़ार का समय कम हो जाता है. कॉन्टेंट पाने के लिए सिर्फ़ एक अनुरोध किया जाता है.
ब्राउज़र को फ़ॉर्मैट चुनने की अनुमति देना, उपयोगकर्ता एजेंट का पता लगाने वाले सर्वर साइड के सहायता डेटाबेस का इस्तेमाल करने के मुकाबले आसान, तेज़, और संभावित रूप से ज़्यादा भरोसेमंद है.
हर फ़ाइल सोर्स का टाइप तय करने से नेटवर्क की परफ़ॉर्मेंस बेहतर होती है. ब्राउज़र, वीडियो का कोई हिस्सा "स्निफ़" फ़ॉर्मैट में डाउनलोड किए बिना ही वीडियो सोर्स चुन सकता है.

ये समस्याएं खास तौर पर मोबाइल पर ज़्यादा अहम होती हैं, क्योंकि वहां बैंडविड्थ और रिस्पॉन्स में लगने वाला समय अहम होता है. साथ ही, उपयोगकर्ता का धैर्य भी कम होता है. type एट्रिब्यूट को शामिल न करने पर, परफ़ॉर्मेंस पर असर पड़ सकता है. ऐसा तब होता है, जब काम न करने वाले टाइप के कई सोर्स हों.

यहां कुछ तरीके दिए गए हैं, जिनसे आप बारीकियों के बारे में ज़्यादा जानकारी हासिल कर सकते हैं. वेब पर वीडियो और ऑडियो के काम करने के तरीके के बारे में ज़्यादा जानने के लिए, तकनीकी जानकारों के लिए डिजिटल मीडिया प्राइमर देखें. DevTools में रिमोट डीबगिंग का इस्तेमाल करके भी, नेटवर्क गतिविधि की तुलना टाइप एट्रिब्यूट के साथ और टाइप एट्रिब्यूट के बिना की जा सकती है.

आर्ट ट्रैक के शुरू होने और खत्म होने के समय की जानकारी देना

बैंडविड्थ बचाएं और अपनी साइट को ज़्यादा रिस्पॉन्सिव बनाएं: वीडियो एलिमेंट में शुरू और खत्म होने का समय जोड़ने के लिए, मीडिया फ़्रैगमेंट का इस्तेमाल करें.

मीडिया फ़्रैगमेंट का इस्तेमाल करने के लिए, मीडिया यूआरएल में #t=[start_time][,end_time] जोड़ें. उदाहरण के लिए, वीडियो को पांच से 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 नहीं दिखता है, तो आपको होस्टिंग देने वाली कंपनी से संपर्क करना होगा.

Chrome DevTools का स्क्रीनशॉट: स्वीकार की जाने वाली रेंज: बाइट. — Chrome DevTools का स्क्रीनशॉट: Accept-Ranges: bytes.

पोस्टर इमेज शामिल करना

video एलिमेंट में पोस्टर एट्रिब्यूट जोड़ें, ताकि एलिमेंट लोड होते ही दर्शकों को कॉन्टेंट के बारे में पता चल सके. इसके लिए, वीडियो डाउनलोड करने या वीडियो चलाना शुरू करने की ज़रूरत नहीं है.

<video poster="poster.jpg" ...>
  …
</video>

अगर वीडियो src काम नहीं कर रहा है या कोई भी वीडियो फ़ॉर्मैट काम नहीं करता है, तो पोस्टर को भी फ़ॉलबैक माना जा सकता है. पोस्टर इमेज का एक ही नुकसान है कि इसके लिए, फ़ाइल का एक और अनुरोध करना पड़ता है. इससे कुछ बैंडविड्थ खर्च होती है और रेंडरिंग की ज़रूरत होती है. ज़्यादा जानकारी के लिए, इमेज को बेहतर ढंग से कोड में बदलना लेख पढ़ें.

यह न करें

फ़ॉलबैक पोस्टर के बिना, वीडियो में गड़बड़ी दिखती है.

फ़ॉलबैक पोस्टर के बिना, वीडियो ठीक से नहीं दिखता.

यह करें

फ़ॉलबैक पोस्टर से ऐसा लगता है कि पहला फ़्रेम कैप्चर हो गया है.

फ़ॉलबैक पोस्टर से ऐसा लगता है कि जैसे पहले फ़्रेम को कैप्चर कर लिया गया है.

पक्का करें कि वीडियो ओवरफ़्लो कंटेनर न हों

जब व्यूपोर्ट के लिए वीडियो एलिमेंट बहुत बड़े होते हैं, तो वे अपना कंटेनर बढ़ा सकते हैं. इस वजह से, उपयोगकर्ता के लिए कॉन्टेंट देखना या कंट्रोल इस्तेमाल करना मुश्किल हो जाता है.

Android Chrome का स्क्रीनशॉट, पोर्ट्रेट: बिना स्टाइल वाला वीडियो एलिमेंट, व्यूपोर्ट से बाहर चला गया है. — Android Chrome का स्क्रीनशॉट, पोर्ट्रेट: स्टाइल न दिया गया वीडियो एलिमेंट, व्यूपोर्ट से बाहर दिखता है.

Android Chrome का स्क्रीनशॉट, लैंडस्केप: स्टाइल न किए गए वीडियो एलिमेंट की वजह से व्यूपोर्ट ओवरफ़्लो हो रहा है. — Android Chrome का स्क्रीनशॉट, लैंडस्केप: स्टाइल न दिया गया वीडियो एलिमेंट, व्यूपोर्ट से बाहर दिखता है.

सीएसएस का इस्तेमाल करके, वीडियो के डाइमेंशन कंट्रोल किए जा सकते हैं. अगर सीएसएस आपकी सभी ज़रूरतों को पूरा नहीं करती है, तो FitVids जैसी JavaScript लाइब्रेरी और प्लग इन से मदद मिल सकती है. ये 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, पोर्ट्रेट और लैंडस्केप ओरिएंटेशन के बीच आसानी से स्विच करता है:

iPhone पर Safari में चल रहे वीडियो का स्क्रीनशॉट, पोर्ट्रेट. — iPhone पर Safari में चल रहे वीडियो का पोर्ट्रेट स्क्रीनशॉट.

iPhone पर Safari में चल रहे वीडियो का स्क्रीनशॉट, लैंडस्केप. — iPhone पर Safari में चल रहे वीडियो का स्क्रीनशॉट, लैंडस्केप मोड में.

iPad पर डिवाइस के ओरिएंटेशन और Android पर Chrome की वजह से समस्याएं आ सकती हैं. उदाहरण के लिए, iPad पर लैंडस्केप ओरिएंटेशन में चल रहा वीडियो, अपनी पसंद के मुताबिक बनाने के बिना कुछ ऐसा दिखता है:

iPad पर Safari में लैंडस्केप मोड में चल रहे वीडियो का स्क्रीनशॉट.

सीएसएस की मदद से वीडियो width: 100% या max-width: 100% सेट करने पर, डिवाइस के ओरिएंटेशन लेआउट से जुड़ी कई समस्याएं हल हो सकती हैं.

ऑटोप्ले

autoplay एट्रिब्यूट से यह कंट्रोल होता है कि ब्राउज़र, वीडियो को तुरंत डाउनलोड और चलाएगा या नहीं. यह प्लैटफ़ॉर्म और ब्राउज़र के हिसाब से अलग-अलग तरीके से काम करता है.

Chrome: यह कई बातों पर निर्भर करता है. जैसे, वीडियो को डेस्कटॉप पर देखा जा रहा है या नहीं और मोबाइल उपयोगकर्ता ने आपकी साइट या ऐप्लिकेशन को अपनी होमस्क्रीन पर जोड़ा है या नहीं. ज़्यादा जानकारी के लिए, वीडियो अपने-आप चलने की सुविधा के सबसे सही तरीके देखें.
Firefox: सभी वीडियो और आवाज़ को ब्लॉक करता है. हालांकि, उपयोगकर्ताओं को सभी साइटों या चुनिंदा साइटों के लिए, इन पाबंदियों को हटाने का विकल्प मिलता है. ज़्यादा जानकारी के लिए, Firefox में मीडिया अपने-आप चलने की सुविधा को अनुमति देना या ब्लॉक करना लेख पढ़ें
Safari: पहले, इसके लिए उपयोगकर्ता के जेस्चर की ज़रूरत होती थी. हालांकि, हाल के वर्शन में इस ज़रूरत को कम किया गया है. ज़्यादा जानकारी के लिए, <video> iOS के लिए नई नीतियां देखें.

जिन प्लैटफ़ॉर्म पर वीडियो अपने-आप चलने की सुविधा उपलब्ध है वहां भी आपको यह तय करना होगा कि इसे चालू करना सही है या नहीं:

डेटा खर्च हो सकता है.
उपयोगकर्ता के अनुरोध से पहले मीडिया चलाने से, बैंडविड्थ और सीपीयू का ज़्यादा इस्तेमाल हो सकता है. इससे पेज रेंडर होने में देरी हो सकती है.
हो सकता है कि उपयोगकर्ता किसी ऐसे कॉन्टेक्स्ट में हों जहां वीडियो या ऑडियो चलाना परेशानी पैदा कर सकता हो.

प्रीलोड

preload एट्रिब्यूट से ब्राउज़र को यह जानकारी मिलती है कि कितनी जानकारी या कॉन्टेंट को प्रीलोड करना है.

मान	ब्यौरा
`none`	ऐसा हो सकता है कि उपयोगकर्ता वीडियो न देखना चाहे. इसलिए, कुछ भी प्रीलोड न करें.
`metadata`	मेटाडेटा (अवधि, डाइमेंशन, टेक्स्ट ट्रैक) को पहले से लोड किया जाना चाहिए. हालांकि, इसमें कम से कम वीडियो होना चाहिए.
`auto`	पूरा वीडियो तुरंत डाउनलोड करना, सबसे सही तरीका माना जाता है. खाली स्ट्रिंग से भी यही नतीजा मिलता है.

preload एट्रिब्यूट का असर, अलग-अलग प्लैटफ़ॉर्म पर अलग-अलग होता है. उदाहरण के लिए, Chrome डेस्कटॉप पर 25 सेकंड का वीडियो बफ़र करता है, लेकिन iOS या Android पर नहीं. इसका मतलब है कि मोबाइल पर वीडियो चलाने में देरी हो सकती है, जबकि डेस्कटॉप पर ऐसा नहीं होता. ज़्यादा जानकारी के लिए, ऑडियो और वीडियो को पहले से लोड करके तेज़ी से चलाना या स्टीव साउडर का ब्लॉग देखें.

अब आपके पास अपने वेब पेज पर मीडिया जोड़ने का तरीका है. अब आपको मीडिया को ऐक्सेस करने की सुविधा के बारे में जानना होगा. इस सुविधा की मदद से, सुनने में कमज़ोर लोगों के लिए वीडियो में कैप्शन जोड़े जा सकते हैं. इसके अलावा, जब ऑडियो चलाना मुमकिन न हो, तब भी कैप्शन जोड़े जा सकते हैं.