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