वेब के लिए बेसिक वीडियो की सुविधा के साथ इमेज से आगे बढ़ना

वीडियो से जुड़ी बुनियादी बातें जानें. दर्शकों की दिलचस्पी बढ़ाएं.

Doug Sillars

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

आम तौर पर, आपकी साइट पर जोड़ी गई वीडियो फ़ाइलें, डाउनलोड की जाने वाली सबसे बड़ी फ़ाइलें होती हैं. इसलिए, यह पक्का करना बहुत ज़रूरी है कि फ़ाइलें आपके सभी ग्राहकों के लिए तेज़ी से और बिना रुकावट के चलें. वीडियो से दर्शकों की दिलचस्पी और उनकी संतुष्टि बढ़ सकती है. हालांकि, ऐसा वीडियो जो नहीं चलता या चलने के दौरान रुक जाता है, इससे ग्राहक परेशान हो सकते हैं. इस पोस्ट में, वीडियो डिलीवर करने के लिए 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 वीडियो की तुलना में ज़्यादा बड़ा होता है. एक उदाहरण में, दो मिनट की मूवी के लिए अंतर देखा जा सकता है:

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

प्रीलोड एट्रिब्यूट

वीडियो तब तक नहीं चलाए जा सकते, जब तक कि कुछ वीडियो डाउनलोड और लोकल रूप से सेव न हो जाएं. पेज लोड होने पर, वीडियो का कितना हिस्सा डाउनलोड किया जाए, यह कंट्रोल करने के लिए प्रीलोड एट्रिब्यूट का इस्तेमाल किया जा सकता है. पहले से लोड किए गए एट्रिब्यूट के लिए तीन वैल्यू होती हैं: 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 फ़ाइलों को वीडियो फ़ाइलों से बदला जा सकता है.

वीडियो अपने-आप चलने की सुविधा

अगर आपको अपना वीडियो तुरंत चलाना है, तो autoplay एट्रिब्यूट जोड़ें. उदाहरण के लिए, बैकग्राउंड वीडियो या ऐनिमेटेड GIF की तरह लूप में चलने वाला वीडियो:

<video src="myVideo.mp4" playsinline autoplay>

हालांकि, मोबाइल ब्राउज़र पर वीडियो अपने-आप चलने के लिए, muted एट्रिब्यूट भी जोड़ना ज़रूरी है:

<video src="myVideo.mp4" playsinline autoplay muted>

नतीजा

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