एचटीएमएल 5 वीडियो 10 थिंग्स डिज़ाइनर्स को जानना आवश्यक है

HTML5 क्रांति दुनिया के सभी क्षेत्रों से रोमांचक वेब डिजाइनर है। नई विशिष्टताएँ अर्थिक वेबसाइटों के निर्माण के लिए दर्जनों तत्वों और विशेषताओं का समर्थन करती हैं। इन नई विशेषताओं में ऑडियो और वीडियो प्रारूपों के लिए मल्टीमीडिया टैग शामिल हैं.

पिछले वर्षों में वेब पर स्ट्रीमिंग के लिए पर्याप्त से अधिक एक फ्लैश-आधारित मीडिया प्लेयर और यह तकनीक अभी भी विरासत ब्राउज़रों का समर्थन करने के लिए आवश्यक है। लेकिन शुक्र है कि आधुनिक मानक उन्नत हुए हैं और एचटीएमएल 5 वीडियो को शामिल करने से दर्जनों नए अवसरों के द्वार खुलते हैं.

इस गाइड में मैं वेब के लिए HTML5 वीडियो के लिए एक प्रस्ताव पेश करना चाहूंगा। देशी इन-ब्राउज़र प्लेयर और इसकी सभी कार्यक्षमता को समझने के लिए कुछ अभ्यास करना होगा। और परिचित होने का सबसे अच्छा तरीका पहले सिर में गोताखोरी है!

1. मीडिया के प्रकार

जब आप एक फ्लैश वीडियो प्लेयर के साथ काम कर रहे होते हैं, तो यह सभी .flv में सभी वीडियो प्रारूपों को जोड़ना बहुत आम है। हालांकि यह काम करता है, अधिकांश flv फ़ाइलें अधिक उन्नत फ़ाइल स्वरूपों / कोडेक्स के पास कहीं भी गुणवत्ता बनाए नहीं रख सकती हैं। 3 महत्वपूर्ण वीडियो प्रकार हैं जो HTML5 द्वारा समर्थित हैं: MP4, WebM, और Ogg / Ogv। MPEG-4 फ़ाइल प्रकार आमतौर पर H.264 में एन्कोडेड होता है जो तृतीय पक्ष फ़्लैश खिलाड़ियों में प्लेबैक की अनुमति देता है। इसका मतलब है कि आपको फॉलबैक विधि का समर्थन करने के लिए .flv वीडियो कॉपी रखने की आवश्यकता नहीं है! WebM और Ogg HTML5 वीडियो से संबंधित दो नई फ़ाइल प्रकार हैं। Ogg Theora एन्कोडिंग का उपयोग करता है जो ओपन-सोर्स मानक ऑडियो फ़ाइल प्रारूप पर आधारित है। इन्हें .ogg या .ogv एक्सटेंशन के साथ बचाया जा सकता है.

WebM Google द्वारा लगाई गई एक परियोजना है जिसे आप WebM Project वेबसाइट पर अधिक पढ़ सकते हैं। प्रारूप पहले से ही ओपेरा, Google क्रोम, फ़ायरफ़ॉक्स 4+ और हाल ही में इंटरनेट एक्सप्लोरर 9 द्वारा समर्थित है। यह अभी भी अधिकांश वेब पेशेवरों द्वारा अज्ञात है, लेकिन वेबएम वेब वीडियो के भविष्य में अग्रणी वीडियो मीडिया प्रारूप है।.

2. ब्राउज़र समर्थन

तो आपको अपनी वेबसाइट के लिए इनमें से कौन सी फ़ाइल प्रकार की आवश्यकता है? आदर्श रूप से सभी 3 महान होंगे क्योंकि वे पूर्ण समर्थन स्पेक्ट्रम प्रदान करते हैं। फिर भी यह यथार्थवादी नहीं है, और वास्तव में, आप केवल दो के साथ सभी ठिकानों को कवर कर सकते हैं। यहाँ प्रत्येक ब्राउज़र के लिए क्या काम करता है:

• मोज़िला फ़ायरफ़ॉक्स - वेबएम, ऑग
• Google Chrome - WebM, Ogg
• ओपेरा - वेबएम, ऑग
• सफारी - MP4
• इंटरनेट एक्सप्लोरर 9 - MP4
• इंटरनेट एक्सप्लोरर 6-8 - कोई एचटीएमएल 5, केवल फ्लैश!

यदि आपको याद है, तो पहले मैंने उल्लेख किया था कि जब तक वे H.264 में एनकोडेड नहीं होते तब तक अधिकांश फ़्लैश वीडियो प्लेयर MP4 फ़ाइलों का समर्थन करेंगे। जैसे, इनमें से प्रत्येक ब्राउज़र MP4 + फ्लैश को अंतिम उपाय के रूप में एम्बेड करेगा। इसका मतलब है कि आपको केवल बनाने की आवश्यकता है दो सभी ब्राउज़रों का समर्थन करने के लिए अलग-अलग वीडियो प्रारूप। सफारी के लिए MP4 / IE9 और बाकी के लिए WebM या Ogg के बीच एक विकल्प.

मेरी राय में मैं अत्यधिक वेबएम प्रारूप के साथ चिपके रहने की सलाह देता हूं। इस परियोजना के पीछे कुछ बड़े नाम हैं (अर्थात् Google) और HTML5 समुदाय में बहुत अधिक कर्षण प्राप्त किया है। Ogg / Ogv का समर्थन किया जाएगा, लेकिन सबसे अधिक संभावना है कि वह WebM के छोटे फ़ाइल आकार की लोकप्रियता में खो जाएगा। आप सीन गोल्हेयर द्वारा लिखित वेब पर वीडियो के भविष्य से संबंधित एक टुकड़ा पढ़ सकते हैं.

3. सरल HTML5 वीडियो एम्बेड करना

आइए अब कुछ नमूना कोड एम्बेड करने के लिए आवश्यक सिंटैक्स पर एक नज़र डालें। हम सभी की जरूरत है HTML5 वीडियो टैग प्रत्येक फिल्म URL का संदर्भ है.

ध्यान दें नियंत्रण तथा स्वत: प्ले विशेषताओं को किसी भी मान के साथ सेट करने की आवश्यकता नहीं है। मैं भी शामिल पोस्टर विशेषता जो स्ट्रीमिंग से पहले वीडियो प्लेयर पर एक छवि प्रीलोड करती है। यह कई वेब खिलाड़ियों के साथ एक सामान्य पूर्वावलोकन है.

हम MP4 और WebM दोनों प्रारूपों को वीडियो तत्व के लिए आंतरिक प्रदान करते हैं। यदि इनमें से कोई भी लोड नहीं किया जा सकता है तो हम उपयोगकर्ता को उनके ब्राउज़र को अपडेट करने के लिए एक त्रुटि प्रदर्शित करते हैं.

4. फ्लैश फालबैक ऑफर करना

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

इसे प्राप्त करने का सबसे अच्छा तरीका फ्लैश फ़ॉलबैक प्लेयर है। इनका उपयोग करके जोड़ा जा सकता है एम्बेड या वस्तु किसी तृतीय पक्ष .swf फ़ाइल को संदर्भित करने के लिए टैग। JW प्लेयर और फ्लोप्लेयर दो मुक्त खुले स्रोत समाधान हैं जिन पर आप विचार कर सकते हैं। लेकिन ActiveDen पर प्रीमियम वीडियो प्लेयर भी देखें जो $ 15- $ 20 तक सस्ते हो सकते हैं.

अब चलो ऊपर दिए गए कोड को ट्विंकल फ्लैश प्लेयर में शामिल करते हैं ताकि अस्तित्व में लगभग हर ब्राउज़र का समर्थन किया जा सके.

5. मोबाइल डिवाइस का समर्थन

यह विषय अभी भी अत्यधिक बहस में है क्योंकि मोबाइल उद्योग इतना युवा है। मैक और iOS उपकरणों पर MP4 के लिए Apple समर्थन के साथ बाहर आया। इसका मतलब है कि आप अपने आईपैड, आईफोन या आईपॉड टच पर मूल वीडियो यूआई में .mp4 वीडियो फाइल्स को स्ट्रीम कर सकते हैं। इससे बाजार में काफी हिस्सेदारी है.

हाल ही में एंड्रॉइड डिवाइसों को इसी स्तर के समर्थन के लिए मुश्किल समय मिल रहा था। हालाँकि Google ने आखिरकार .mp4 वेब स्ट्रीमिंग को अपना लिया है जो अब लगभग सभी मोबाइल उपयोगकर्ताओं को कैपिटल में लाती है। और चूंकि Flash यहाँ कोई विकल्प नहीं है, इसलिए MP4 सबसे अच्छा समाधान उपलब्ध है। यही कारण है कि आप .mp4 कोड को पहले एम्बेड करना चाहते हैं ताकि iOS डिवाइस तुरंत फ़ाइल को पहचान सकें.

6. सफारी उपयोगकर्ता एजेंट

उल्लेख किया जाना चाहिए कि एक बग फ्लैश खिलाड़ियों और देशी एचटीएमएल 5 के बीच मौजूद है। सफारी पर स्ट्रीमिंग। चूंकि ब्राउज़र दोनों फ़ाइलों का समर्थन कर सकता है, इसलिए आपको फ्लैश के स्थान पर HTML5 वीडियो स्ट्रीम प्राप्त करने में समस्या हो सकती है। हालांकि TUAW की इस महान ब्लॉग पोस्ट के लिए धन्यवाद, अपने ब्राउज़िंग उपयोगकर्ता एजेंट को बदलना आसान है.

यह आपके वेबपृष्ठ को किसी अन्य डिवाइस पर चल रहे ब्राउज़र को पहचानने के लिए बाध्य करेगा। सबसे अधिक संभावना है कि आप iPad का चयन करेंगे, जो किसी भी फ्लैश प्लेबैक का समर्थन नहीं करता है। यह केवल एक प्रमुख मुद्दा है जिसे आप MP4 देशी और फ्लैश प्लेबैक विधियों का परीक्षण करते समय चला सकते हैं.

7. खिलाड़ी नियंत्रण का प्रबंधन करें

मानो या न मानो वहाँ भी आप HTML5 वीडियो प्लेयर नियंत्रण में हेरफेर करने के लिए उपयोग कर सकते हैं। यह सभी खुले तरीकों के एक सेट से खींचकर जावास्क्रिप्ट में किया जा सकता है। यहां सूचीबद्ध करने के लिए बहुत सारे तरीके हैं, लेकिन अधिक विवरण के लिए W3C मीडिया तत्व डॉक्स के माध्यम से स्किम करने का प्रयास करें.

आपको एक सामान्य विचार देने के लिए, ओपेरा देव ब्लॉग ने कुछ छोटे ट्यूटोरियल पोस्ट किए हैं जो न्यूबाय के लिए बहुत अच्छे हैं। यहां तक ​​कि अगर आपने पहले कभी जावास्क्रिप्ट या jQuery नहीं उठाया है, तब भी इस एक के साथ चल रहे मैदान को हिट करना सरल है। आप वीडियो मीडिया की विशिष्ट विशेषताओं जैसे कि पर कॉल कर सकते हैं मौन या वर्तमान समय. तब आप jQuery में DOM में हेरफेर करके इन मानदंडों के आधार पर क्रियाएँ (मंद पृष्ठभूमि, प्रदर्शन विज्ञापन) कर सकते थे.

ओपेरा लेख में एक ही डेवलपर अपने स्क्रिप्टेड वीडियो प्लेयर का एक कार्यशील डेमो प्रदान करता है। अपने स्वयं के UI नियंत्रणों को अनुकूलित करने का अवसर बकाया है। यह सिर्फ यह दिखाने के लिए जाता है कि HTML5 वीडियो कितना शक्तिशाली बन रहा है.

8. वीडियो प्रारूप रूपांतरण

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

MP4 से निपटने के लिए जो आपकी सबसे बड़ी प्राथमिकता है, आप HandBrake का उपयोग कर सकते हैं जो एक स्वतंत्र, खुला स्रोत समाधान है जो सभी 3 प्रमुख OS पर चलता है। यह H.264 को कुछ अन्य कोडेक्स के साथ सपोर्ट करेगा जो फ्रीबी यूजर्स के लिए यह सबसे अच्छा विकल्प है। यदि आपके पास पैसा है तो मुझे Xilisoft कनवर्टर की सिफारिश करनी चाहिए जो केवल $ 40 के जीवनकाल लाइसेंस के लिए मैक ऐप स्टोर पर है.

ऐसा लग रहा है कि वेबएम मार्ग जीवन को बहुत आसान बना देता है। Miro वीडियो कन्वर्टर विंडोज और ओएस एक्स के लिए एक मुफ्त टूल है जो बेहतरीन गुणवत्ता वाली वेबएम फाइल तैयार करता है। यह Ogg Theora एन्कोडिंग भी कर सकता है जो बहुत अच्छी गुणवत्ता के साथ बाहर आता है.

9. एक वेब प्लेयर का निर्माण

HTML5 चश्मे के साथ वीडियो प्रारूप अभी भी डेवलपर्स के लिए नए हैं। कस्टम नियंत्रण, स्लाइडर्स, प्ले / पॉज़ आइकन आदि की अनुमति के लिए खुले प्रोटोकॉल का इंतजार किया जा रहा है।.

कोड नवागंतुकों के लिए थोड़ा गहन है क्योंकि इसके लिए उन्नत सीएसएस लक्ष्यीकरण और कुछ औपचारिक jQuery की आवश्यकता होती है। ऐसे अन्य फ्रेमवर्क हैं जिनका आप निर्माण कर सकते हैं, जिन पर पहले से ही एक अनुकूलित खिलाड़ी डिज़ाइन है। इसी तरह यह स्लाइडशेयर प्रस्तुति एचटीएमएल 5 वीडियो प्लेयर के निर्माण के लिए एक बेहतरीन परिचय है.

एक HTML5 वीडियो प्लेयर का निर्माण

10. वीडियोजेएस लाइब्रेरी

VideoJS शायद HTML5 वीडियो खिलाड़ियों के लिए मेरा पसंदीदा समाधान है। आप सभी की जरूरत है उनके स्व-होस्टेड जावास्क्रिप्ट और सीएसएस स्टाइलशीट आपके दस्तावेज़ में कहीं न कहीं शामिल हैं। फिर आप स्किनिंग के लिए कुछ अतिरिक्त कक्षाओं के साथ मानक एचटीएमएल 5 वीडियो कोड लिखते हैं। मैंने उनका नमूना कोड नीचे जोड़ा:

यदि आप वर्डप्रेस ब्लॉग चलाते हैं तो आप उनके कस्टम WP प्लगइन को भी आज़मा सकते हैं। इसमें स्वचालित रूप से उन पृष्ठों पर लाइब्रेरी js / css शामिल होगा जहां आप HTML5 वीडियो प्रदर्शित करते हैं। और आप शॉर्टकोड का उपयोग करके किसी भी पोस्ट या पृष्ठ संपादक के भीतर से ऐसा कर सकते हैं (यहां देखें).

निष्कर्ष

मुझे आशा है कि यह परिचयात्मक मार्गदर्शिका वेब वीडियो के भविष्य में आपकी रुचि को उत्तेजित कर सकती है। अधिक उपयोगकर्ताओं के मोबाइल को चालू करने के साथ यह महत्वपूर्ण है कि इन प्रकार के मीडिया के लिए HTML5 मानकों को अपनाया जाए। वेब को और अधिक सरल बनाया जाना चाहिए ताकि डेवलपर्स पूरी तरह से समर्थित समाधानों को बहुत जल्दी तैयार कर सकें। हम एचटीएमएल 5 वीडियो के भविष्य के लिए आपके विचारों और सुझावों को सुनना पसंद करेंगे। यदि आप साझा करना चाहते हैं, तो कृपया नीचे पोस्ट चर्चा क्षेत्र में एक टिप्पणी छोड़ने के लिए स्वतंत्र महसूस करें.