किसी वेब पेज में मीडिया जोड़ने के कई तरीके हैं. आपने पहले स्टैंडर्ड <video> टैग का इस्तेमाल करने का तरीका जाना था. इस लेख में, आपको कुछ मीडिया फ़्रेमवर्क (या लाइब्रेरी) के बारे में जानकारी मिलेगी. इनका इस्तेमाल, डिफ़ॉल्ट HTML5 वीडियो प्लेयर के काम करने के तरीके को बेहतर बनाने या बदलने के लिए किया जा सकता है.
मीडिया फ़्रेमवर्क, मालिकाना और ओपन-सोर्स, दोनों तरह के होते हैं. इनमें एपीआई का एक सेट होता है, जो अलग-अलग कंटेनर फ़ॉर्मैट और ट्रांसमिशन प्रोटोकॉल के लिए ऑडियो और/या वीडियो चलाने की सुविधा देता है. किसी अच्छे फ़्रेमवर्क में, मॉड्यूलर आर्किटेक्चर होता है. साथ ही, इसमें साफ़ और पूरी जानकारी देने वाले दस्तावेज़ होते हैं. आम तौर पर, इसे सेट अप और इस्तेमाल करना भी आसान होना चाहिए. शायद आप खुद से पूछ रहे हों कि, "अगर HTML5 वीडियो प्लेयर में पहले से ही ज़्यादातर सुविधाएं मौजूद हैं, तो मुझे फ़्रेमवर्क या लाइब्रेरी का इस्तेमाल क्यों करना चाहिए?" यह एक बढ़िया सवाल है. चलिए, इस बारे में ज़्यादा जानते हैं.
फ़्रेमवर्क इस्तेमाल करने के फ़ायदे
ज़्यादातर मामलों में, अपने कॉन्टेंट को दिखाने के लिए, आपको मीडिया फ़्रेमवर्क का इस्तेमाल करना पड़ेगा. अगर आपके पास ऑफ़लाइन वीडियो चलाने, स्ट्रीमिंग, आंकड़ों, पिक्चर में पिक्चर, झलक वाले थंबनेल, एम्बेड करने, और कमाई करने जैसी बेहतर सुविधाओं को डेवलप और मैनेज करने की क्षमता नहीं है, तो आपको इस काम को किसी मौजूदा समाधान पर छोड़ देना चाहिए. जैसे, फ़िल दर ऑप्टिमाइज़ेशन, विज्ञापन शेड्यूलिंग या हेडर बिडिंग.
ऐसे में, मीडिया फ़्रेमवर्क काम आते हैं. ये आपको सुविधाओं का एक सेट और उन सुविधाओं को इस्तेमाल करने की शर्तें उपलब्ध कराते हैं. इसके बाद, आपको यह तय करना होता है कि आपके प्रोजेक्ट के लिए कौनसा फ़्रेमवर्क सही है. अगले लेख में हम इस बारे में बात करेंगे कि हमने ऑफ़लाइन स्ट्रीमिंग की सुविधा वाले PWA को कैसे बनाया, जिसमें कई जटिल सुविधाएं शामिल हैं. स्पॉइलर अलर्ट: इसमें काफ़ी काम करना पड़ा और यह अब भी प्रोडक्शन के लिए तैयार नहीं है. परेशानी से बचने के लिए, फ़्रेमवर्क का इस्तेमाल करें.
वीडियो चलाने के लिए कई प्लेयर उपलब्ध हैं. फ़िलहाल, इस लेख में तीन प्लेयर के बारे में बताया गया है: Shaka Player, JW Player, और Video.js.
Shaka Player
दस्तावेज़ के मुताबिक, Google का Shaka Player, अडैप्टिव मीडिया के लिए एक ओपन सोर्स JavaScript लाइब्रेरी है. यह प्लग इन का इस्तेमाल किए बिना, ब्राउज़र में अडैप्टिव मीडिया फ़ॉर्मैट (जैसे कि DASH और HLS) चलाता है. इसके बजाय, Shaka Player, ओपन वेब स्टैंडर्ड MediaSource एक्सटेंशन और एन्क्रिप्ट किए गए मीडिया एक्सटेंशन का इस्तेमाल करता है.
Shaka Player, IndexedDB का इस्तेमाल करके मीडिया को ऑफ़लाइन स्टोर और चलाने की सुविधा भी देता है. कॉन्टेंट को किसी भी ब्राउज़र पर सेव किया जा सकता है. लाइसेंस का स्टोरेज, ब्राउज़र के साथ काम करने की सुविधा पर निर्भर करता है.
Shaka Player के दस्तावेज़ों की साइट पर, सामान्य इस्तेमाल के लिए निर्देश दिए गए हैं. हालांकि, Shaka Player का इस्तेमाल करने के लिए, आपको सबसे पहले वीडियो या ऑडियो एलिमेंट वाला एचटीएमएल पेज बनाना होगा. इसके बाद, अपने ऐप्लिकेशन के JavaScript में polyfills इंस्टॉल करें और ब्राउज़र के साथ काम करने की जांच करें. जब ब्राउज़र यह पुष्टि कर लेता है कि Shaka Player काम करता है, तो स्क्रिप्ट एक प्लेयर ऑब्जेक्ट बनाएगी. इससे मीडिया एलिमेंट को रैप किया जा सकेगा, गड़बड़ियों का पता लगाया जा सकेगा, और फिर मेनिफ़ेस्ट फ़ाइल लोड की जा सकेगी. इसके बाद, Shaka Player काम करेगा.
Shaka का इस्तेमाल करने के लिए, आपको अपनी मीडिया फ़ाइलों को खुद होस्ट और एन्कोड करना होगा. मीडिया सर्वर बनाना बहुत मुश्किल नहीं है. हालांकि, मीडिया को कोड में बदलना या ट्रांसकोड करना, समय लेने वाला और मुश्किल काम हो सकता है. बार-बार होने वाले टास्क को अपने-आप पूरा करने और प्रोसेस को तेज़ करने के लिए, हो सकता है कि आप इस हिस्से को Zencoder, Amazon Elastic Encoder या Google Transcoder API जैसी किसी सेवा पर ऑफ़लोड करना चाहें.
Shaka Player की सबसे अच्छी बात यह है कि इसमें DASH और एचएलएस पैकेजिंग और एन्क्रिप्शन के लिए, Shaka Packager नाम का एक शानदार टूल और मीडिया पैकेजिंग SDK टूल भी है. यह ऑनलाइन स्ट्रीमिंग के लिए, मीडिया कॉन्टेंट को तैयार और पैकेज कर सकता है. इस बारे में आपको पहले मीडिया कन्वर्ज़न और मीडिया एन्क्रिप्शन में बताया गया था.
JW Player
अगर आपको वीडियो होस्ट करने और एन्कोडिंग/ट्रांसकोडिंग की सेवाएं देने वाला कोई विकल्प चाहिए, तो JW Player का इस्तेमाल करें. हालांकि, ध्यान रखें कि JW Player एक मालिकाना सॉफ़्टवेयर है. इसका मतलब है कि आपके पास प्लैटफ़ॉर्म या रोडमैप पर ज़्यादा कंट्रोल नहीं है. इसका एक बुनियादी और मुफ़्त वर्शन है, जिसमें वीडियो वॉटरमार्क के साथ दिखते हैं. इसके अलावा, इसका एक व्यावसायिक वर्शन भी है.
JW Player, MPEG-DASH (सिर्फ़ पैसे चुकाकर लिया जाने वाला वर्शन), डिजिटल राइट मैनेजमेंट (डीआरएम) (Vualto के साथ), इंटरैक्टिव विज्ञापन, इंटरफ़ेस को पसंद के मुताबिक बनाने, और एम्बेड करने की सुविधा के साथ स्ट्रीमिंग की सुविधा देता है. एपीआई और SDK टूल के बारे में अच्छी तरह से जानकारी दी गई हो. हालांकि, अगर आपको अपने मीडिया को तुरंत और बिना किसी शुल्क के होस्ट करना है, तो YouTube वीडियो एम्बेड करना सबसे अच्छा विकल्प है.
Video.js
उनकी वेबसाइट के मुताबिक, Video.js को एचटीएमएल5 के लिए शुरू से ही बनाया गया है. यह HTML5 वीडियो और आधुनिक स्ट्रीमिंग फ़ॉर्मैट के साथ काम करता है. जैसे, DASH और एचएलएस के साथ-साथ YouTube और Vimeo. यह डेस्कटॉप और मोबाइल डिवाइसों पर वीडियो चलाने की सुविधा देता है. साथ ही, सीएसएस पर आधारित स्किन के साथ हर जगह अच्छा दिखता है.
Video.js का इस्तेमाल करने के कुछ तरीके हैं. हालांकि, सबसे आसान तरीका यह है कि Fastly के मुफ़्त सीडीएन वर्शन का इस्तेमाल किया जाए. शुरू करने का तरीका पेज पर जाकर, प्लेयर को सेट अप करने के बारे में ज़्यादा जानें. Video.js एक बेहतरीन वीडियो प्लेयर है. इसके साथ भी, Shaka Player की तरह ही आपको वीडियो को होस्ट और कोड में बदलना होगा. हालांकि, प्लग इन सिस्टम में एक अंतर है. यहां Video.js प्लेयर में YouTube वीडियो चलाए जा सकते हैं. साथ ही, इसे पसंद के मुताबिक भी बनाया जा सकता है.
अन्य फ़्रेमवर्क
कई अलग-अलग फ़्रेमवर्क और लाइब्रेरी उपलब्ध हैं. इस लेख में, इनके बारे में सिर्फ़ जानकारी दी गई है. फ़्रेमवर्क चुनते समय, आपको यह ध्यान रखना चाहिए कि प्रोजेक्ट के लिए आपको कौनसी सुविधाएं चाहिए. साथ ही, यह भी तय करना चाहिए कि आपको अपने मीडिया को कैसे होस्ट करना है और उसे कैसे एन्कोड या ट्रांसकोड करना है. क्या आपको वीडियो शुरू होने से पहले दिखने वाले विज्ञापनों या कमाई करने की अन्य रणनीतियों की ज़रूरत है? क्या आपका मीडिया ऑफ़लाइन उपलब्ध होगा? आपका बजट कितना बड़ा या छोटा है? इसके अलावा, कई अन्य बातों का भी ध्यान रखा जाता है. रिसर्च करें और अपने नेटवर्क में मौजूद लोगों से सुझाव मांगें. इसके अलावा, और भी कई बेहतर विकल्प हैं. कोई भी विकल्प चुनने से पहले, कुछ समय निकालकर अपनी टीम के लिए सही विकल्प चुनें. साथ ही, प्रोजेक्ट के लाइफ़साइकल के दौरान, ग़ैर-ज़रूरी तकनीकी समस्याओं या उसे मैनेज करने में आने वाली मुश्किलों से बचें.
इसके बाद, आपको ऑफ़लाइन स्ट्रीमिंग की सुविधा वाले PWA के बारे में जानकारी मिलेगी. हमने इसे इसलिए बनाया है, ताकि हम आपको यह बता सकें कि अपने समाधान को रोल आउट करने के दौरान, मुख्य समस्याओं को कैसे हल किया जा सकता है. इसके लिए, हमने किसी फ़्रेमवर्क के बिना, सिर्फ़ एचटीएमएल5 वीडियो ऑब्जेक्ट का इस्तेमाल किया है.