अपने पहले ब्लॉग के लिए पीसी प्रो , वेब डेवलपर इयान डेवलिन HTML5 के साथ अपनी वेबसाइट में वीडियो एम्बेड करने का तरीका बताता है
मैंने अपना Google खाता कब बनाया
शायद HTML5 की सबसे बड़ी और सबसे चर्चित विशेषता एम्बेडेड वीडियो है। वर्तमान में, आपकी वेबसाइट पर वीडियो सामग्री जोड़ने का एकमात्र तरीका फ्लैश, क्विकटाइम या रीयलप्लेयर जैसे तृतीय-पक्ष प्लगइन के साथ है। HTML5 और वीडियो तत्व की शुरुआत के साथ, यह सब बदल जाएगा, वीडियो समर्थन वेब ब्राउज़र द्वारा नियंत्रित किया जा रहा है, किसी भी तीसरे पक्ष के समर्थन की आवश्यकता को दूर कर रहा है।
कई वेब ब्राउज़र पहले से ही HTML5 के लिए समर्थन प्रदान करते हैं। यहां हम यह प्रकट करने जा रहे हैं कि आप अपनी साइट में प्लगइन-मुक्त वीडियो कैसे एम्बेड कर सकते हैं और आपके सामने आने वाली समस्याएं।
फ़ाइल प्रकार और ब्राउज़र संगतता
आरंभ करने के लिए, हम संक्षेप में उन विभिन्न वीडियो फ़ाइल प्रकारों पर एक नज़र डालेंगे जो HTML5 में समर्थित हैं। ये Theora OGG और H.264 (.mp4) हैं। विभिन्न ब्राउज़र विभिन्न प्रकारों का समर्थन करते हैं, और कुछ बिल्कुल भी समर्थन नहीं करते हैं। निम्न तालिका यह इंगित करती है:
| थियोरा ओजीजी | एच .264 (एमपी 4) | |
|---|---|---|
| फ़ायरफ़ॉक्स 3.5+ | ✓ | एक्स |
| क्रोम 3+ | ✓ | ✓ |
| सफारी 3+ | एक्स | ✓ |
| ओपेरा 10.5+ | ✓ | एक्स |
| इंटरनेट एक्सप्लोरर 8 | एक्स | एक्स |
| इंटरनेट एक्सप्लोरर 9 | एक्स | ✓ |
| आई - फ़ोन | एक्स | ✓ |
| एंड्रॉयड | एक्स | ✓ |
कोडेक्स और अन्य तकनीकी मुद्दे
HTML5 स्वयं उपयोग करने के लिए एक वीडियो कोडेक निर्दिष्ट नहीं करता है, और इसने तर्क दिया है कि कौन सा है वेब के लिए उपयोग करने के लिए सबसे अच्छा . तो सभी ब्राउज़रों को कवर करने के लिए, हमें दोनों कोडेक्स का समर्थन करना होगा।
और फिर निश्चित रूप से इंटरनेट एक्सप्लोरर है। फिलहाल, इंटरनेट एक्सप्लोरर के जारी किए गए संस्करणों में से कोई भी वीडियो तत्व का समर्थन नहीं करता है और वीडियो चलाने के लिए अभी भी एक प्लगइन की आवश्यकता है। यह Internet Explorer 9 (संभवतः अगले वर्ष की शुरुआत में) के रिलीज़ होने के साथ बदल जाएगा, जब H.264 को कई अन्य HTML5 उपहारों के साथ समर्थित किया जाएगा।
यदि आप सोच रहे हैं कि आप अपनी वीडियो फ़ाइलों को OGG में कैसे परिवर्तित कर सकते हैं (आप Theora OGG प्रकार के बारे में अधिक पढ़ सकते हैं थियोरा कुकबुक ) फ़ाइलों का उपयोग कर मिरो वीडियो कन्वर्टर .
वीडियो तत्व और कोडेक के बारे में अधिक गहन जानकारी के लिए, पर जाएं html5 में गोता लगाएँ: वेब पर वीडियो मार्क पिलग्रिम द्वारा।
HTML5 कोड
अब हम वास्तविक HTML5 कोड पर चलते हैं और हम कैसे काम करने के लिए चीज़ प्राप्त कर सकते हैं। HTML5 हमें दो नए तत्व प्रदान करता है जिनका उपयोग हम अपने वेब पेजों में वीडियो जोड़ने के लिए कर सकते हैं: |_+_| तत्व, जिसका हम पहले ही उल्लेख कर चुके हैं, और |_+_| तत्व। आइए इनमें से प्रत्येक को बारी-बारी से देखें।
तत्व
वीडियो तत्व में निम्नलिखित विशेषताएं हो सकती हैं:
| गुण | विवरण |
|---|---|
| एसआरसी | वीडियो फ़ाइल के लिए ही एक मान्य URL |
| स्वत: प्ले | एक बूलियन इंगित करता है कि क्या वीडियो को स्वचालित रूप से चलाया जाना चाहिए |
| नियंत्रण | एक बूलियन इंगित करता है कि डिफ़ॉल्ट मीडिया नियंत्रण ब्राउज़र द्वारा प्रदर्शित किया जाना चाहिए |
| लूप | एक बूलियन इंगित करता है कि क्या वीडियो को बार-बार चलाया जाना चाहिए |
| प्रीलोड | ब्राउज़र को इंगित करता है कि क्या वीडियो के पूर्व-खाली डाउनलोडिंग की आवश्यकता है, या यदि केवल मेटाडेटा ही इसकी आवश्यकता है। संभावित मान हैं:
|
| पोस्टर | कोई वीडियो डेटा उपलब्ध न होने पर प्रदर्शित होने वाली छवि फ़ाइल का URL |
| चौड़ाई | वीडियो की चौड़ाई, सीएसएस पिक्सल में |
| ऊंचाई | वीडियो की ऊंचाई, सीएसएस पिक्सल में |
इससे, यह देखा जा सकता है कि अकेले वीडियो तत्व का उपयोग करके एक OGG वीडियो को अपनी वेबसाइट में एम्बेड करना कितना आसान है:
इसमें वास्तव में बस इतना ही है।
थियोरा ओजीजी प्रारूप का समर्थन करने वाला कोई भी ब्राउज़र अब बिना किसी हलचल के आपके वीडियो को सफलतापूर्वक प्रदर्शित और चलाएगा। बेशक यह उतना आसान नहीं है, क्योंकि जैसा कि हमने ऊपर की तालिका से देखा है, कोड केवल फ़ायरफ़ॉक्स, क्रोम और ओपेरा में काम करेगा। इसलिए हमें H.264 पर भी वापस आना होगा। यह |_+_| . का उपयोग करके प्राप्त किया जा सकता है तत्व, जो हमें वीडियो तत्व के लिए कई मीडिया स्रोतों को परिभाषित करने की अनुमति देता है।
ग्राफिक्स कार्ड विंडोज़ 10 की जांच कैसे करें how
तत्व
स्रोत तत्व में निम्नलिखित विशेषताएं हैं:
| गुण | विवरण |
|---|---|
| एसआरसी | मीडिया के लिए एक मान्य URL (इस मामले में वीडियो) फ़ाइल ही |
| प्रकार | मीडिया फ़ाइल का प्रकार जो होना चाहिए a माइम प्रकार , जैसे |_+_| इंगित करता है कि यह एक थियोरा ओजीजी वीडियो है, और आप MIME कोडेक भी प्रदान कर सकते हैं ताकि ब्राउज़र को यह तय करने में मदद मिल सके कि वीडियो को कैसे चलाया जाए |_+_|। |
| आधा | मीडिया संसाधन का इच्छित मीडिया प्रकार देता है और एक मान्य होना चाहिए मीडिया क्वेरी , जैसे |_+_| इंगित करता है कि वीडियो हैंडहेल्ड डिवाइस के लिए उपयुक्त है या |_+_| जो इंगित करता है कि वीडियो 720 पिक्सेल या अधिक की स्क्रीन के लिए उपयुक्त है। |
नोट: स्रोत तत्व शून्य है और इसमें एक प्रारंभिक टैग है लेकिन कोई समापन टैग नहीं है
स्रोत तत्व के बारे में सबसे उपयोगी बात यह है कि हम इसका उपयोग विभिन्न फ़ाइल प्रकारों को ढेर करने के लिए कर सकते हैं, ब्राउज़र को बदले में प्रत्येक को तब तक आज़माने की अनुमति देता है जब तक कि उसे कोई ऐसा नहीं मिल जाता जिसे वह चला सकता है।
उपयोग और एक साथ
वीडियो तत्व के भीतर विभिन्न प्रकारों में वीडियो को स्टैक करने के लिए, हम निम्नानुसार कोड दर्ज करते हैं:
उपरोक्त कोड अब इंटरनेट एक्सप्लोरर को छोड़कर सभी ब्राउज़रों में काम करेगा, जो ऊपर बताए गए संदेश को प्रदर्शित करेगा।
आप HTML5 टेस्ट वीडियो पेज को देखकर स्वयं इसका परीक्षण कर सकते हैं, जिसमें थियोरा ओजीजी और एमपी4 प्रारूप दोनों में एक तितली का एक नमूना वीडियो है, इसलिए यदि आप इसे फ़ायरफ़ॉक्स, क्रोम, सफारी, ओपेरा या आईफोन या एक में देख रहे हैं। Android हैंडसेट, आपको इसे देखने में सक्षम होना चाहिए।
आप में से नुकीले चाकू अब देखेंगे कि हम इस स्टैकिंग का लाभ उठा सकते हैं और नीचे दिए गए कोड का उपयोग करके खेद प्रदर्शित करने के बजाय फ्लैश (या कुछ अन्य प्लगइन) पर वापस आ सकते हैं, आप इस वीडियो संदेश को नहीं देख सकते हैं :
निष्कर्ष
अधिकांश HTML5 तत्वों के साथ, स्रोत और वीडियो तत्वों के लिए ब्राउज़र समर्थन वर्तमान में खराब है। इस समय एक बड़ी बहस चल रही है कि क्या स्रोत तत्व फ्लैश के उपयोग को वेबसाइटों पर वीडियो सामग्री जोड़ने की सबसे लोकप्रिय विधि के रूप में मार देगा। मुझे यकीन नहीं है कि यह फ्लैश को पूरी तरह से मार देगा, लेकिन फिर भी मुझे लगता है कि यह कहना उचित है कि यह यहां रहने के लिए है और वेब डेवलपर्स को वीडियो एम्बेड करने के लिए एक क्लीनर, आसान दृष्टिकोण प्रदान करेगा।
