सामान्य वीडियो जानें. दिलचस्पी बढ़ाएं.
क्या आपको अपनी वेबसाइट में वीडियो जोड़ना है? जैसे-जैसे डिवाइस और नेटवर्क कनेक्शन तेज़ी से और ज़्यादा ताकतवर होते जा रहे हैं, वैसे-वैसे आप इमेज से आगे बढ़कर वेब बनाने के लिए अपने टूलकेस्ट में वीडियो जोड़ सकते हैं. रिसर्च से पता चलता है कि वीडियो वाली वेबसाइटों से ज़्यादा यूज़र ऐक्टिविटी और बिक्री होती है. इसलिए, भले ही आपने अब तक अपनी साइटों पर वीडियो नहीं जोड़ा है, लेकिन इसे जल्द से जल्द शामिल करना ज़रूरी है.
अगर आप चाहें, तो अपनी साइट में जोड़ी जाने वाली वीडियो फ़ाइलें, डाउनलोड की गई सबसे बड़ी फ़ाइलें होंगी. इस वजह से, यह पक्का करना बेहद ज़रूरी है कि फ़ाइलें इस तरह से बनाई गई हों कि
वे आपके सभी ग्राहकों के लिए तेज़ी से और बिना किसी रुकावट के चल सकें.
वीडियो से भले ही दर्शकों की दिलचस्पी और उसे अच्छा अनुभव मिल सकता है, लेकिन
वीडियो चलने के दौरान अगर कोई वीडियो नहीं चलता या रुकता है, तो इससे ग्राहक को परेशानी हो सकती है.
इस पोस्ट में वीडियो को डिलीवर करने के लिए, HTML5 <video> टैग के इस्तेमाल पर फ़ोकस किया गया है. इसलिए, वीडियो स्ट्रीम करने के बारे में नहीं, बल्कि इसमें बताया गया है.
आइए, शुरू करते हैं!
<video> टैग
ऐसा लगता है, है न? वीडियो जोड़ने के लिए, आपको <video> टैग जोड़ना होगा, किसी सोर्स पर पॉइंट करना होगा, और फिर आप रेस में शामिल हो जाएंगे!
<video src="myVideo.mp4">
तुम सही थी. सबसे ऊंचे स्तर पर, वेब पर वीडियो जोड़ने के लिए आपको बस इतना ही करना है. वीडियो के लेआउट और डिलीवरी को बेहतर बनाने के लिए, वीडियो टैग में कई एट्रिब्यूट जोड़े जा सकते हैं.
<source> टैग
वेब पर वीडियो की डिलीवरी को बेहतर बनाने का सबसे अच्छा तरीका, ब्राउज़र पर डिलीवर की जाने
वाली फ़ाइलों को ऑप्टिमाइज़ करना है. ऐसा करने के लिए, <source> टैग का इस्तेमाल करें:
<video>
<source src="myWebmVideo.webm" type="video/webm">
<source src="myh265Video.mp4" type="video/mp4">
<source src="myh264Video.mp4" type="video/mp4">
</video>
यह तीन अलग-अलग सोर्स फ़ाइलों का रेफ़रंस देता है. ब्राउज़र सबसे ऊपर से शुरू होता है और इस्तेमाल किए जा सकने वाले पहले फ़ॉर्मैट और कोडेक को चुनता है. वीडियो की दुनिया में, फ़ाइल फ़ॉर्मैट को अलग-अलग कोडेक के साथ सेव किया जा सकता है, जिसे आम तौर पर कंटेनर कहा जाता है. हर एक फ़ाइल फ़ॉर्मैट को अलग-अलग एट्रिब्यूट के साथ सेव किया जा सकता है. (इस बारे में ज़्यादा जानकारी यहां दी गई है.) ऊपर दिए गए उदाहरण में, पहला विकल्प WebM फ़ॉर्मैट है (जिसे VP8 या VP9 कोडेक के साथ एन्कोड किया जा सकता है). साथ ही, दुनिया भर के 78% उपयोगकर्ता इसका इस्तेमाल (लिखते समय) कर सकते हैं. दूसरा विकल्प mp4 का H.265 कोडेक है, जो iOS और उसके बाद के Macs पर काम करता है. ये कोडेक नए हैं और इनमें डेटा कंप्रेस करने की सुविधा बेहतर है. साथ ही, ये पुराने वीडियो फ़ॉर्मैट की तरह ही क्वालिटी वाले वीडियो डिलीवर करते हैं.
हमारी सूची में आखिरी विकल्प H.264 mp4 है, जो दुनिया भर के 92% उपयोगकर्ताओं पर काम करता है, लेकिन यह एक पुराना फ़ॉर्मैट है और आम तौर पर, WebM या H.265 वीडियो की तुलना में काफ़ी बड़ा है. एक उदाहरण में, आप दो मिनट की मूवी का अंतर देख सकते हैं:
| कोडेक | फ़ाइल का साइज़ |
|---|---|
| VP8 | 5.5 एमबी |
| VP9 | 4.2 एमबी |
| H.265 | 5.4 एमबी |
| H.264 | 16.1 एमबी |
छोटी फ़ाइलों को डिलीवर करना, वीडियो की परफ़ॉर्मेंस को बेहतर तरीके से ऑप्टिमाइज़ करता है. इससे वीडियो को बेहतर तरीके से डिलीवर किया जा सकता है. जब एक छोटा वीडियो डाउनलोड किया जाता है, तो वीडियो जल्द ही चलने लगता है और वीडियो बफ़र तेज़ी से भर जाता है. इससे, वीडियो चलाने के दौरान कम स्टॉल लगते हैं. इसके अलावा, सर्वर लोड कम होता है. इससे कई वीडियो फ़ाइलों के लिए स्टोरेज की ज़रूरत बढ़ जाती है.
प्रीलोड एट्रिब्यूट
वीडियो तब तक चलना शुरू नहीं कर सकते, जब तक कि कुछ वीडियो डाउनलोड और आपके डिवाइस पर सेव
नहीं हो जाते. प्रीलोड एट्रिब्यूट का इस्तेमाल करके, यह तय किया जा सकता है कि पेज लोड होने पर कितना वीडियो डाउनलोड किया जाए. प्रीलोड एट्रिब्यूट के लिए तीन वैल्यू होती हैं:
auto, metadata, और none.
preload='auto'
अगर 'auto' का इस्तेमाल किया जाता है, तो पूरा वीडियो डाउनलोड किया जाएगा. इस बात से कोई फ़र्क़ नहीं पड़ता कि
उपयोगकर्ता ने 'चलाएं' बटन को दबाया है या नहीं. इससे, वीडियो तेज़ी से चलाया जा सकता है, क्योंकि
वह वीडियो प्लेयर दबाने से पहले ही डाउनलोड हो जाता है. डेटा खर्च (और सर्वर लोड होने की वजह से) इसका इस्तेमाल सिर्फ़ तब किया जाना चाहिए, जब इस बात की संभावना बहुत ज़्यादा हो कि वीडियो देखा जाना चाहिए. ऐसा न करने पर, डाउनलोड किए गए वीडियो का पूरा डेटा
बेहद फ़ायदा होगा.
preload='metadata'
यह Chrome और Safari पर पहले से लोड करने की डिफ़ॉल्ट सेटिंग है. 'metadata' का इस्तेमाल करने पर, वीडियो का पहला 3% हिस्सा डाउनलोड हो जाता है. हालांकि, 'auto' को इससे जुड़ी चेतावनियां भी मिलती हैं. हालांकि, वीडियो का सिर्फ़ 3% डाउनलोड करने पर, पूरे वीडियो के मुकाबले सर्वर/डेटा के इस्तेमाल में काफ़ी कम खर्च आता है. साथ ही, यह पक्का किया जाता है कि वीडियो का कुछ हिस्सा स्थानीय तौर पर सेव किया जाए, ताकि तेज़ी से वीडियो चालू हो सके.
preload='none'
इससे ज़्यादातर डेटा बचाया जा सकता है, लेकिन प्ले दबाने पर वीडियो शुरू होने की रफ़्तार धीमी हो सकती है, क्योंकि सेटिंग के हिसाब से, डिवाइस पर वीडियो का शून्य किलोबाइट पहले से लोड होता है. यह सेटिंग ऐसे वीडियो के लिए सही है जो मौजूद हैं, लेकिन चलाए जाने की संभावना नहीं है. अगर उपयोगकर्ता ने अपने ब्राउज़र में लाइट मोड चालू किया है, तब भी इसका इस्तेमाल किया जा सकता है.
पोस्टर
हो सकता है कि आप एक पोस्टर इमेज रखें जो वीडियो चलना शुरू होने से पहले वीडियो विंडो पर दिखे:
<video src="myVideo.mp4" poster="/image/myVideoImage.jpg">
बिना पोस्टर वाले वीडियो में, शुरू होने से पहले काली स्क्रीन दिख रही है.
पोस्टर वाला वीडियो ज़्यादा दिलचस्प होता है.
पेज पर काले रंग के बॉक्स की जगह फ़ोटो जोड़कर, वेबसाइट को और ज़्यादा
दिलचस्प और इंटरैक्टिव बनाया जा सकता है. हालांकि, poster एट्रिब्यूट का इस्तेमाल करने पर, वीडियो डाउनलोड शुरू होने से पहले इमेज डाउनलोड हो जाती है. इस वजह से, अपने-आप चलने वाले वीडियो के लिए पोस्टर जोड़ने से बचें.
क्योंकि डाउनलोड होने से वीडियो के डाउनलोड होने में देरी होगी.
प्लेबैक कंट्रोल
controls एट्रिब्यूट जोड़ने पर, वीडियो चलाने के कंट्रोल जुड़ जाते हैं. इनके बिना, आपके ग्राहक आपका वीडियो
शुरू या बंद नहीं कर सकते. आपको इसे वीडियो के लिए जोड़ना चाहिए,
ताकि उपयोगकर्ता बंद कर सकें, रोक सकें, वॉल्यूम बदल सकें और ऐसे ही दूसरे काम कर सकें. बैकग्राउंड में या लूप में चलने वाले वीडियो के लिए, इस एट्रिब्यूट को छोड़ा जा सकता है.
म्यूट किया गया
muted एट्रिब्यूट की वजह से, वीडियो म्यूट हो जाता है. अगर कोई कंट्रोल नहीं दिया जाता है, तो वीडियो चलने के दौरान वह म्यूट रहेगा. अगर ऐसा है, तो वीडियो से ऑडियो ट्रैक हटाना सही रहेगा. इससे
ग्राहक को डिलीवर की जा रही वीडियो फ़ाइल का साइज़ कम हो जाता है.
कंटेनर और कोडेक की तरह, ऑडियो फ़ाइल को हटाना या डीमक्सिंग भी इस लेख में शामिल नहीं है. इसके लिए, मीडिया में धोखाधड़ी वाली चीट शीट पर जाकर निर्देश देखे जा सकते हैं.
लूप
कॉन्टेंट को लूप में चलाने वाले वीडियो (जैसे, ऐनिमेशन वाला GIF) को डिलीवर करने के लिए loop एट्रिब्यूट जोड़ें. वीडियो फ़ाइलें, आम तौर पर ऐनिमेशन वाले GIF के मुकाबले बहुत छोटी होती हैं. इसलिए, इस तरीके से आप अपने GIF को वीडियो फ़ाइलों से बदल सकते हैं.
वीडियो अपने-आप चलने की सुविधा
अगर आपको अपना वीडियो तुरंत चलाना है (उदाहरण के लिए, बैकग्राउंड वीडियो या ऐसा वीडियो जो ऐनिमेशन वाले GIF की तरह लूप में दिखता है), तो आप autoplay एट्रिब्यूट जोड़ सकते हैं:
<video src="myVideo.mp4" autoplay>
हालांकि, मोबाइल ब्राउज़र पर वीडियो अपने-आप चलने के लिए, muted एट्रिब्यूट को भी जोड़ना ज़रूरी है:
<video src="myVideo.mp4" autoplay muted>
नतीजा
अपनी वेबसाइट में वीडियो जोड़ने से, आपके ग्राहकों की दिलचस्पी बढ़ाने का एक नया ज़रिया जुड़ता है लेकिन कॉन्टेंट सही तरीके से डिलीवर होना चाहिए, ताकि बिना किसी रुकावट के वीडियो बिना किसी रुकावट के चले. <video> टैग के बिल्ट-इन एट्रिब्यूट का इस्तेमाल करने से, आपको अपनी वेबसाइट पर आने वाले हर व्यक्ति को बेहतरीन वीडियो डिलीवर करने में काफ़ी मदद मिल सकती है.