सीएसएस और जावास्क्रिप्ट के लिए 10 उपयोगी फ़ॉलबैक विधियाँ

कोड कमियां आपके कई अद्वितीय आगंतुकों के साथ समझौता करने का सही समाधान हैं। वेब पर हर कोई समान ऑपरेटिंग सिस्टम, वेब ब्राउज़र या भौतिक हार्डवेयर का उपयोग नहीं कर रहा है। आपके वेबपेज वास्तव में स्क्रीन पर कैसे प्रस्तुत होंगे, इन सभी कारकों के बारे में। नए सीएसएस या जावास्क्रिप्ट ट्रिक्स के साथ काम करते समय आप अक्सर ऐसे तकनीकी बगों में भाग लेंगे.

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

नीचे हमारे गाइड की जाँच करें और हमें टिप्पणी अनुभाग में अपने विचार और प्रश्न बताएं.

1. छवियों के साथ गोल कोनों

CSS3 तकनीकों ने मुख्यधारा के वेब डिज़ाइन में आसमान छू लिया है। सबसे उल्लेखनीय गुणों में से एक है बॉर्डर-त्रिज्या जो ऑन-द-फ्लाई गोल कोनों के लिए अनुमति देता है। ये व्यावहारिक रूप से किसी भी बटन, डिव या टेक्स्ट बॉक्स पर सुंदर लगते हैं। एकमात्र समस्या वेब ब्राउज़र के बीच सीमित समर्थन है.

इंटरनेट एक्सप्लोरर 7 सहित कई पुराने ब्राउज़र इस संपत्ति का समर्थन नहीं करते हैं। तो सभी मानक ब्राउज़रों के लिए काम करने वाले गोल कोनों को रखने के लिए आपको छवियों के साथ एक कमबैक का निर्माण करना होगा.

प्रत्येक कोनों पर छवियों के लिए समायोजन करते समय मानक कोड मुख्य div पर नियमित CSS3 के गुणों का उपयोग करता है। आपको मुख्य कंटेनर के भीतर कुछ अतिरिक्त डिवीजनों को स्थापित करने की आवश्यकता होगी जो कि पृष्ठभूमि में कोने की छवियों को प्रदर्शित करने के लिए उपयोग किए जाते हैं.

# मेनबॉक्स -वेबकैट-बॉर्डर-रेडियस: 5 पीएक्स; / * सफ़ारी * / -मोज़-बॉर्डर-त्रिज्या: 5 पीएक्स; / * फ़ायरफ़ॉक्स \ गेको इंजन * / -ओ-बॉर्डर-त्रिज्या: 5 पीएक्स; / * ओपेरा * / सीमा-त्रिज्या: 5 पीएक्स;  # मेनबॉक्स .topc बैकग्राउंड: url ('कॉर्नर-tl.png') नो-रिपीट टॉप लेफ्ट;  # मेनबॉक्स .topc स्पैन बैकग्राउंड: url ('कोर्नर-ट्रैप') नो-रिपीट टॉप राइट;  # मेनबॉक्स .btmc बैकग्राउंड: url ('कार्नर-ब्ल.पीएनजी') कोई रिपीट बॉटम नहीं;  # मेनबॉक्स .btmc स्पैन बैकग्राउंड: url ('कार्नर- br.png') नो-रिपीट बॉटम राइट;  

तनाव से खुद को बचाने के लिए मैं राउंडेडकोर्न जैसे ऐप का उपयोग करने का सुझाव देता हूं। यह एक इन-ब्राउज़र वेब ऐप है जो CSS3 और छवियों दोनों का उपयोग करके गोल कोने सीएसएस उत्पन्न करता है। यह उन डिजाइनरों के लिए विशेष रूप से उपयोगी होगा जिनके पास फ़ोटोशॉप या जीआईएमपी जैसे ग्राफिक्स सॉफ़्टवेयर तक पहुंच नहीं है.

2. jQuery ड्रॉपडाउन मेनू सिस्टम

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

इस समाधान के साथ एकमात्र समस्या यह है कि इंटरनेट एक्सप्लोरर 6 इन सीएसएस होवर चयनकर्ताओं का समर्थन नहीं करता है। हालांकि IE7 + महान काम करता है; और यदि जावास्क्रिप्ट पहले स्थान पर सक्षम है, तो निश्चित रूप से सभी ब्राउज़र ठीक काम करेंगे। सीएसएस प्लस पर इस ट्यूटोरियल का कोड मेरे द्वारा पाए गए सर्वोत्तम संसाधनों में से एक है। यह न केवल jQuery के साथ एक समाधान प्रदान करता है, बल्कि IE मुद्दों के लिए आवश्यक सीएसएस भी है.

/ * करंट की एक श्रेणी jQuery * / #nav li.current> a बैकग्राउंड: # f7f7f7 के माध्यम से जोड़ी जाएगी;  / * CSS fallback * / #nav li: hover> ul.child प्रदर्शन: ब्लॉक;  #nav li: hover> ul.grandchild प्रदर्शन: ब्लॉक;  

स्रोत

एक और वैकल्पिक समाधान जो आप आज़मा सकते हैं, बस IE6 में प्रत्येक मेनू को खुले तौर पर प्रदर्शित करना है। आप ब्राउज़र संस्करण के आधार पर स्टाइलशीट लागू करने के लिए इंटरनेट एक्सप्लोरर सशर्त टिप्पणियों का उपयोग कर सकते हैं। बेशक, यह सबसे सुंदर समाधान नहीं होगा, लेकिन यह बस काम करेगा.

अगर आपको नहीं लगता कि Internet Explorer 6 एक चिंता का विषय है, तो इस वैकल्पिक कमबैक से भी परेशान न हों। उपरोक्त ट्यूटोरियल और उसके बाद का कोड आपके जावास्क्रिप्ट मेनू को सभी प्रमुख ब्राउज़रों के सख्त सीएसएस के साथ लोड करने के लिए पर्याप्त होना चाहिए.

3. लक्षित इंटरनेट एक्सप्लोरर शैलियाँ

मुझे यकीन है कि हम सभी Microsoft के इंटरनेट एक्सप्लोरर से निकलने वाले मुद्दों के बारे में जानते हैं। मैं उनके नवीनतम IE8 और IE9 के साथ भविष्य की संभावनाओं के लिए थोड़ा सा श्रेय दे सकता हूं। हालाँकि अभी भी IE6 / IE7 चलाने वाला एक छोटा सा दर्शक है और आप वास्तव में उन्हें अभी तक अनदेखा नहीं कर सकते हैं.

(छवि स्रोत: गीथूब)

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

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

# नोव ली स्थिति: रिश्तेदार; चौड़ाई: 150px; / * को IE के लिए एक निश्चित चौड़ाई निर्धारित करनी चाहिए * / #nav li ul / * सब-नेवी कोड * / प्रदर्शन: ब्लॉक; स्थिति: निरपेक्ष; चौड़ाई: ऑटो; / * अपनी खुद की चौड़ाई को परिभाषित करें या ली तत्व में सेट करें * / #nav li ul li चौड़ाई: 100%;  

4. विरासत आईई अपारदर्शिता / पारदर्शिता

इंटरनेट एक्सप्लोरर के साथ कई कष्टप्रद कीड़े में से एक अपारदर्शिता के साथ सौदा है। CSS3 में अल्फा-पारदर्शिता सेटिंग्स को अपारदर्शिता गुण के माध्यम से बदला जा सकता है। अभी तक केवल Microsoft Internet Explorer 9 के रूप में इस सुविधा का समर्थन करता है.

IE6 + को लक्षित करने के लिए सबसे अच्छा समाधान है फिल्टर, एक मालिकाना सेटिंग केवल IE द्वारा मान्यता प्राप्त है। नीचे संक्षिप्त कोड उदाहरण देखें:

.mydiv अपारदर्शिता: 0.55; / * CSS3 * / फ़िल्टर: अल्फा (अपारदर्शिता = 55); / * IE6 + * / 

आपको केवल पारदर्शिता की आवश्यकता वाले किसी भी तत्व के भीतर ऊपर की पंक्ति को शामिल करने की आवश्यकता है। ध्यान दें कि CSS3 की संपत्ति के समान, सभी बाल तत्व भी इस अस्पष्टता को बदल देंगे। यदि आप एक नई विधि की तलाश कर रहे हैं जो विशेष रूप से IE8 को लक्षित करती है, तो नीचे दिए गए कोड को देखें। यह उसी तरह से व्यवहार करता है जैसे कि हमारी फ़िल्टर संपत्ति केवल Microsoft IE8 पार्सर द्वारा मान्यता प्राप्त है.

-एमएस-फिल्टर: "प्रोगिड: डीएक्सआईएमजेट्रांसफॉर्म। माइकोसियन।एलएफएच (अपारदर्शिता = 55)"; / * IE8 * / 

5. फॉलबैक इमेज के साथ CSS3 बटन बनाना

बटन सभी प्रकार के इंटरफेस के लिए एक शानदार वेब तत्व हैं। वे प्रपत्र इनपुट, नेविगेशन आइटम, या यहां तक ​​कि प्रत्यक्ष पृष्ठ लिंक के रूप में व्यवहार कर सकते हैं। CSS3 के साथ अब कई अद्वितीय शैलियों जैसे पृष्ठभूमि ग्रेडिएंट, बॉक्स छाया, गोल कोनों, आदि के साथ बटन को प्रारूपित करना संभव है.

हालाँकि आप भरोसा नहीं कर सकते कि आपके सभी आगंतुक इन नए गुणों को प्रस्तुत करने में सक्षम होंगे। जब बटन (या समान यूआई तत्वों) के लिए एक फ़ॉलबैक डिज़ाइन का निर्माण करते हैं तो दो अलग-अलग विकल्प होते हैं। सबसे पहले एक पृष्ठभूमि छवि को शामिल करना है जिसे सीएसएस जैसा दिखेगा। इसे फोटोशॉप में आसानी से पूरा किया जा सकता है। हालाँकि यदि आप सॉफ्टवेयर के विशेषज्ञ नहीं हैं तो यह परेशानी भरा हो सकता है.

इसका विकल्प एक सादे पृष्ठभूमि रंग और सरल सीएसएस शैलियों में कमबैक है। मैं CSS3 के ग्रेडर पर CSS-ट्रिक्स के शानदार पोस्ट से कुछ कोड उदाहरणों का उपयोग कर रहा हूं। सफारी, फ़ायरफ़ॉक्स, क्रोम और यहां तक ​​कि ओपेरा सहित सभी प्रमुख ब्राउज़र इन गुणों का समर्थन करते हैं। जिस क्षेत्र में आप मुद्दों पर चलेंगे, वह विरासत ब्राउज़रों के समर्थन में है: पुराने मोज़िला इंजन, IE6 / 7, संभवतः मोबाइल सफारी भी.

.gradient-bg पृष्ठभूमि-रंग: # 1a82f7; / * सबसे खराब रंग का ठोस उपयोग करता है * / पृष्ठभूमि-छवि: url ('https://assets.hongkiat.com/uploads/code-fallback-methods/fallback-gradient.png'); पृष्ठभूमि-छवि: -webkit-gradient (रैखिक, 0% 0%, 0% 100%, (# 2F2727) से, (# 1a82f7)); पृष्ठभूमि-चित्र: -webkit-linear-gradient (शीर्ष, # 2F2727, # 1a82f7); पृष्ठभूमि-छवि: -मोज़-लीनियर-ग्रेडिएंट (शीर्ष, # 2F2727, # 1 ए 82 एफ 7); पृष्ठभूमि-छवि: -ms-रैखिक-ढाल (शीर्ष, # 2F2727, # 1a82f7); पृष्ठभूमि-छवि: -o-linear-gradient (शीर्ष, # 2F2727, # 1a82f7);  

स्रोत

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

6. मोबाइल सामग्री के लिए जाँच करना

2012 में एक और बड़ी प्रवृत्ति मोबाइल इंटरनेट ब्राउज़िंग की लोकप्रियता है। स्मार्टफोन हर जगह हैं और 3 जी / वाई-फाई पर डेटा अधिक से अधिक सुलभ हो रहा है। इस प्रकार कई डिज़ाइनर मोबाइल उपयोगकर्ताओं के लिए फ़ॉलबैक लेआउट प्रदान करना चाह रहे हैं.

कुछ लोकप्रिय मोबाइल वेब ब्राउज़र डेस्कटॉप वातावरण के समान पृष्ठों को प्रस्तुत करेंगे। मोबाइल सफारी और ओपेरा को इसके लिए जाना जाता है, यहां तक ​​कि कई सामान्य jQuery लिपियों का भी समर्थन करते हैं। लेकिन ये पृष्ठ हमेशा मोबाइल के अनुकूल नहीं होते हैं और UX पर विस्तार करने के लिए जगह होती है.

ऐसे दो तरीके हैं जिनसे आप मोबाइल ब्राउज़र का पता लगा सकते हैं और एक वैकल्पिक लेआउट या स्टाइलशीट प्रदर्शित कर सकते हैं। पहला जावास्क्रिप्ट के माध्यम से है जो फ्रंटएंड टूल के रूप में महान काम करता है। नीचे लिखी गई स्क्रिप्ट बहुत ही सरल है और केवल iPhone / iPod Touch उपयोगकर्ताओं के लिए जाँच करता है। पता लगाएं मोबाइल ब्राउजर एक शानदार वेबसाइट है जो अधिक विस्तृत स्क्रिप्ट प्रदान करता है जिसे आप इसके बजाय चला सकते हैं.

// पुनर्निर्देशित iPhone / iPod टच फंक्शन isiPhone () return ((navigator.platform.indexOf ("iPhone")! = -1) || (navigator.platform.indexOf ("iPod")! = -1))  अगर (isiPhone ()) window.location = "m.yourdomain.com";  

अब दूसरा विकल्प PHP जैसी बैकएंड भाषा के माध्यम से जाँच कर रहा है। आप एक चर के रूप में जाना जा सकता है HTTP_USER_AGENT. यदि आप इन शर्तों को गूगल करते हैं तो दर्जनों वेबसाइटें बंद हो जाएंगी। हालाँकि मैं अभी भी पिछले पैराग्राफ में जोड़े गए मोबाइल ब्राउजर लिंक का पता लगाने की सलाह देता हूँ.

साइट में न केवल PHP में पार्स करने के लिए मुफ्त डाउनलोड करने योग्य स्क्रिप्ट हैं, बल्कि अन्य लोकप्रिय बैकएंड भाषाओं के भी टन हैं। इनमें ASP.NET, ColdFusion, रेल, पर्ल, पायथन, और यहां तक ​​कि IIS और Apache जैसे सर्वर-आधारित कोड शामिल हैं।.

7. ग्रेसफुल फॉलबैक के साथ स्लाइसबॉक्स स्लाइडर

2011 से मेरा पसंदीदा CSS3 फ्रीबी शायद कोड्रॉप्स द्वारा जारी किया गया स्लाइसबॉक्स 3 डी इमेज स्लाइडर है। यह उन ब्राउज़र में सुंदर सीएसएस एनीमेशन संक्रमण का उपयोग करता है जो उन्हें समर्थन करते हैं, वर्तमान में Google क्रोम में और सफारी में नवीनतम। यह अजीब है कि अभी भी सबसे हाल ही में फ़ायरफ़ॉक्स या IE9 रिलीज अभी भी इन बदलावों का उपयोग नहीं कर सकता है.

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

वैकल्पिक रूप से कोड्रोप्स ने हाल ही में एक और स्लाइडिंग इमेज पैनल भी जारी किया है जो और भी अधिक रचनात्मक CSS3 तकनीकों का उपयोग करता है। यह छवि स्लाइडर सीएसएस में पृष्ठभूमि छवियों का उपयोग करके बनाया गया है, इसलिए संक्रमण प्रभाव के बिना भी यह बहुत आसानी से व्यवहार करता है.

8. jQuery स्क्रिप्ट CDN फेल्सफे विधि

जावास्क्रिप्ट को वेब पर विकसित करने के लिए jQuery लाइब्रेरी लगभग आवश्यक हो गई है। कई वैकल्पिक CDN आपूर्तिकर्ताओं ने स्थिर URL बनाए हैं जहाँ वे jQuery के सभी रिलीज़ संस्करणों की मेजबानी करते हैं। Google, Microsoft और यहां तक ​​कि jQuery ने खुद कुछ अन्य कम प्रसिद्ध वेबसाइटों के बीच, डेवलपर्स के लिए एक CDN पोर्टल बनाया है.

इन प्रदाताओं पर संभवतः हजारों-हजारों डेवलपर्स निर्भर हैं। यदि कोई भी कारण या सर्वर ऑफ़लाइन हो गया, तो किसी भी लिंक को तोड़ दिया गया तो क्या होगा? एक स्थानीय प्रति की मेजबानी करना और इसे लागू करना एक अच्छा विचार होगा जब आपको इसकी आवश्यकता होगी। अच्छी तरह से सीएसएस-ट्रिक्स से इस महान गिरावट कोड स्निपेट आपको बस यही करने देता है!

स्रोत

9. अद्वितीय एचटीएमएल 5 चेकबॉक्स

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

मैं इस अद्भुत CSS / jQuery ट्यूटोरियल में जल्दी वसंत 2011 में वापस चला गया। यह आपके चेकबॉक्स के लिए ऐप्पल-स्टाइल स्विच बनाने का एक सरल तरीका प्रदान करता है जो पुराने ब्राउज़रों में शान से नीचा दिखाते हैं। कोड उपयोगकर्ता सहभागिता के बीच / बंद शैलियों को बदलने के लिए पृष्ठभूमि छवियों का उपयोग करता है.

मूल इनपुट चेकबॉक्स तत्व डिफ़ॉल्ट रूप से छिपे हुए हैं और उनका मूल्य जावास्क्रिप्ट कॉल के माध्यम से निर्धारित किया जाता है। इसका मतलब है कि आप गतिशील रूप से किसी भी बिंदु पर jQuery के माध्यम से मान खींच सकते हैं, लेकिन इसे हिट करने पर फॉर्म में भी पास किया जाएगा “जमा करें” बटन.

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

10. HTML5 समर्थित वीडियो

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

मोज़िला फ़ायरफ़ॉक्स आम तौर पर .OGG वीडियो का समर्थन करता है जिसे आप VLC एक कनवर्टर के रूप में उपयोग कर सकते हैं। Google Chrome और Safari .MP4 या H.264 एन्कोडेड .MOV फ़ाइलों के लिए देखें। इन भिन्नताओं के कारण आपको सामान्य रूप से शामिल करना होगा तीन विभिन्न वीडियो प्रारूप - एक .FLV कमबैक के साथ ऊपर सूचीबद्ध दो.

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

स्रोत

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

निष्कर्ष

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

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