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