इस पेज का अनुवाद 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 का स्क्रीनशॉट: 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 में चल रहे वीडियो का स्क्रीनशॉट, लैंडस्केप मोड में.

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

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

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

ऑटोप्ले

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

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

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

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

प्रीलोड

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

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

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

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