वेब डिजाइनरों के लिए एचटीएमएल 5। भाग 3: मल्टीमीडिया

वेब डिजाइनरों के लिए एचटीएमएल 5

1. मार्कअप भाषा का संक्षिप्त इतिहास
2. HTML5 मॉडल
3. मल्टीमीडिया
4. फॉर्म 2.0
5. अर्थ विज्ञान
6. एचटीएमएल 5 और वर्तमान स्थितियां

विश्व व्यापी नेटवर्क के इतिहास में, विकास के एक नए स्तर पर संक्रमण का हर अगला दौर तकनीकी नवाचार के साथ शुरू हुआ। जब HTML में img तत्व जोड़ा गया था, तो इसने मूल रूप से नेटवर्क का रूप बदल दिया। तब जावास्क्रिप्ट को शुरू करने ने इसे और अधिक गतिशील और इंटरैक्टिव बना दिया। अजाक्स थोड़ी देर बाद दिखाई दिया, जिसने नेटवर्क पर पूर्ण अनुप्रयोग बनाने के अवसर खोले।



आधुनिक वेब मानक इतने उन्नत हैं कि अब आप केवल HTML, सीएसएस और जावास्क्रिप्ट की क्षमताओं का उपयोग करके लगभग कुछ भी बना सकते हैं। लगभग कुछ भी।



इन मानकों के विनिर्देशों में अभी भी अंतराल हैं। इसलिए, यदि आप किसी पृष्ठ को पाठ और चित्रों के साथ ढेर करना चाहते हैं, तो आप HTML और CSS को पूरी तरह से प्रबंधित करेंगे। लेकिन अगर आपको ऑडियो या वीडियो प्रकाशित करने की आवश्यकता है, तो आपको अनिवार्य रूप से तृतीय-पक्ष प्रौद्योगिकियों - फ्लैश या सिल्वरलाइट की ओर मुड़ना होगा।



ये प्रौद्योगिकियाँ "प्लग" हैं, ऐसे "प्लग" जो नेटवर्क में "छेद" भरते हैं। वे ऑनलाइन गेम, फिल्में और संगीत प्रकाशित करना अपेक्षाकृत आसान बनाते हैं, लेकिन वे खुले नहीं हैं और निजी कंपनियों द्वारा स्वामित्व और नियंत्रित हैं। हां, वही फ्लैश एक शक्तिशाली उपकरण है, लेकिन इसका उपयोग कुछ हद तक बुरी ताकतों से निपटने के समान है: हमें नए अवसर मिलते हैं जो दूसरे तरीके से उपलब्ध नहीं होते हैं, लेकिन बदले में हम अपनी स्वतंत्रता में से कुछ खो देते हैं।



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

कैनवास

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



और यहां कैनवास तत्व आता है, जिसे गतिशील रूप से आकार बदलने योग्य चित्र बनाने के लिए डिज़ाइन किया गया है।



यह अपने आप में बहुत सरल है। आप सभी टैग मापदंडों में निर्दिष्ट हैं जो कि कैनवास के आयाम हैं:

<canvas id="my-first-canvas" width="360" height="240"></canvas>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

जैसा कि आप देख सकते हैं, यह टैग युग्मित है। लेकिन आप इसे अंदर रखते हैं यह केवल उन ब्राउज़रों के लिए है जो इस तत्व का समर्थन नहीं करते हैं:

 <canvas id="my-first-canvas" width="360" height="240"> <p>No canvas support? Have an old-fashioned image instead:</p> <img src="puppy.jpg" alt="a cute puppy"> </canvas>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

गैर-ब्राउज़र उपयोगकर्ता

कैनवास में एक प्यारा पिल्ला की तस्वीर दिखाई देगी।

सभी प्रतिपादन कार्य जावास्क्रिप्ट में हैं। सबसे पहले चीजें, आपको यह निर्दिष्ट करना चाहिए कि हम किस तत्व के साथ और किस संदर्भ में काम कर रहे हैं। इस मामले में "संदर्भ" एक एपीआई है, और आज यह केवल एक है - दो आयामी (जैसा कि आप देख सकते हैं, बढ़ने के लिए जगह है):

 var canvas = document.getElementById('my-first-canvas'); var context = canvas.getContext('2d');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

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

कोड ड्राइंग

तो लाइनों का रंग लाल हो जाता है:

 context.strokeStyle = '#990000';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

अब आप जो कुछ भी आकर्षित करेंगे, उसमें लाल स्ट्रोक होगा। उदाहरण के लिए, एक आयत बनाने के लिए सिंटैक्स इस तरह दिखता है:

 strokeRect ( left, top, width, height )
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

यदि आप इस आयत को 50 पिक्सेल ऊँचा, 100 चौड़ा बनाना चाहते हैं, और कैनवास तत्व के बाएँ किनारे से इसे 20 पिक्सेल और ऊपर से 30, निम्न लिखें:

 context.strokeRect(20,30,100,50);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

जेएस द्वारा आयत आयत कैनवास में अंकित है ।

बेशक, यह एक प्राथमिक उदाहरण है। दो-आयामी एपीआई में कई अलग-अलग विधियां शामिल हैं: फिल्टाइल, फिलरक्ट, लाइनविद, शैडोक्लोर और कई और।



सैद्धांतिक रूप से, किसी भी छवि को उसी इलस्ट्रेटर में बनाया जा सकता है जो कैनवास तत्व का उपयोग करके बिल्कुल उसी तरह बनाया जा सकता है । व्यवहार में, हालांकि, यह काफी समय लेने वाला हो सकता है और बड़ी मात्रा में कोड का उत्पादन करेगा। दूसरी ओर, यह बिल्कुल वैसा नहीं है जैसा कैनवास का आविष्कार किया गया था।

और फिर क्यों? इसका क्या उपयोग है?

यह बहुत अच्छा है कि जावास्क्रिप्ट और कैनवास का उपयोग करके, आप मक्खी पर वेक्टर छवियां बना सकते हैं, लेकिन अगर उन्हें कोई और जटिल बना दिया जाए, तो यह काम खुद को सही नहीं ठहराएगा।



कैनवास का अर्थ और मुख्य विशेषता यह है कि इसकी सामग्री को उपयोगकर्ता क्रियाओं के जवाब में नए तत्वों को प्रस्तुत करके गतिशील रूप से अद्यतन किया जा सकता है। पेज विजिटर द्वारा शुरू की गई घटनाओं पर प्रतिक्रिया देने की यह क्षमता उन टूल और गेम्स को बनाना संभव बनाती है जो पहले तृतीय-पक्ष प्रौद्योगिकियों के उपयोग की आवश्यकता होती थी, जैसे कि फ्लैश।



कैनवास सुविधाओं के पहले उदाहरणों में से एक मोज़िला लैब्स से बेस्पिन प्रोजेक्ट था - एक एप्लिकेशन जो कोडिंग के लिए एक सरल पाठ संपादक है जो ब्राउज़र विंडो में काम करता है।

Bespin वेब एप्लिकेशन को कैनवास तत्व का उपयोग करके बनाया गया है ।

यह बहुत शक्तिशाली चीज है। वह प्रभावशाली है। लेकिन यह भी, वह एक अच्छा उदाहरण है कि कैनवास के साथ क्या नहीं किया जाना चाहिए ।

पहुंच से वंचित

एक पाठ संपादक, संक्षेप में, पाठ के साथ काम करने के लिए डिज़ाइन किया गया है। Bespin सफलतापूर्वक कैनवास तत्व के अंदर पाठ के साथ काम करता है, एक चेतावनी के साथ - यह अब पाठ नहीं है। यह इसके ठीक विपरीत वेक्टर आकार का एक सेट है।



नेटवर्क के प्रत्येक पृष्ठ को DOM - डॉक्यूमेंट ऑब्जेक्ट मॉडल, "डॉक्यूमेंट ऑब्जेक्ट मॉडल" का उपयोग करके वर्णित किया जा सकता है। DOM में कई अलग-अलग "नोड्स" शामिल हो सकते हैं, जिनमें से सबसे महत्वपूर्ण तत्व, विशेषताएँ और टेक्स्ट ऑब्जेक्ट हैं। "ईंटों" के ये तीन प्रकार लगभग किसी भी पृष्ठ का निर्माण करने के लिए पर्याप्त हैं जिसकी आप कल्पना कर सकते हैं। बदले में, कैनवास तत्व में DOM नहीं है - इसकी सामग्री को अलग-अलग भागों में विभाजित नहीं किया जा सकता है और इसे नोड्स के पेड़ के रूप में प्रस्तुत किया जा सकता है।



इसी तरह के कार्यों के लिए स्क्रीन रीडर और अन्य प्रौद्योगिकियां किसी दस्तावेज़ की संरचना और अर्थ को समझने के लिए DOM विश्लेषण की क्षमता पर आधारित हैं। कोई डोम नहीं - कोई पहुँच नहीं।



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

स्मार्ट कैनवास

पूर्वगामी के आधार पर, हम यह मान सकते हैं कि फिलहाल वेब डिजाइनरों के लिए अपनी परियोजनाओं में कैनवास लागू करने का कोई अर्थ नहीं है। ऐसा नहीं है।



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



मान लीजिए कि आपके पास किसी तरह का डेटा है। आप उनमें ग्राफ के साथ देखी गई प्रवृत्ति को स्पष्ट करना चाहते हैं। यदि डेटा स्थिर है - तो आप उदाहरण के लिए Google चार्ट API का उपयोग करके एक ग्राफ़-चित्र बना सकते हैं। लेकिन अगर डेटा को रास्ते में बदला जा सकता है, तो यह एक ऐसा ग्राफ बनाने के लिए बहुत अच्छा होगा जो हर बार एक नए बदलाव को ध्यान में रखते हुए प्रदान किया जाता है। कैनवस यहां एकदम सही है - आप तालिका तत्व की सामग्री को निकालने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं और इसके आधार पर एक गणितीय गणना चित्रण बना सकते हैं।



फिलामेंट ग्रुप के स्मार्ट लोगों ने वैसे भी एक jQuery प्लगइन विकसित किया।

कैनवास के उपयोग से उत्पन्न रेखांकन के उदाहरण

एक और विकल्प है। वास्तव में, गतिशील छवियों को उत्पन्न करने के लिए कैनवास तत्व केवल एपीआई नहीं है। एसवीजी - स्केलेबल वेक्टर ग्राफिक्स, स्केलेबल वेक्टर ग्राफिक्स - एक एक्सएमएल प्रारूप जिसका उपयोग कैनवास के समान आकृतियों का वर्णन करने के लिए किया जा सकता है। और XML के सार के आधार पर, एसवीजी सामग्री सैद्धांतिक रूप से स्क्रीन पाठकों द्वारा "समझा" जाती है।



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



WHATWG ने "ट्राईडेन रास्तों को पाटने" और "पहिए को सुदृढ़ नहीं करने" के नारे को देखते हुए, यह अजीब लग सकता है कि उन्होंने HTML5 में कैनवास को शामिल करने के लिए चुना जब इसी तरह की SVG तकनीक पहले से मौजूद है। जैसा कि अक्सर होता है, एचटीएमएल 5 विनिर्देश वास्तव में केवल दस्तावेजों का एक बहुत कुछ है जो पहले से ही ब्राउज़रों द्वारा समर्थित है। एचटीएमएल 5 के लिए कैनवास का आविष्कार नहीं किया गया था - यह पहली बार सफारी में दिखाई दिया और इसे ऐप्पल द्वारा बनाया गया था। जब अन्य ब्राउज़रों के डेवलपर्स ने इस विचार को देखा, तो उन्होंने इसे पसंद किया और इसकी प्रतिलिपि बनाई गई।



यह थोड़ा अव्यवस्थित और अव्यवस्थित लग सकता है, लेकिन तथ्य यह है कि हमारे कई मानकों का जन्म हुआ है। कम से कम XMLHttpRequest ऑब्जेक्ट को अजाक्स पर ले जाएं, पहली बार Microsoft इंटरनेट एक्सप्लोरर 5 में पिछली शताब्दी के अंत में लागू किया गया था।



ब्राउज़रों की दुनिया में जहां फिटेस्ट बचता है, वर्तमान में कैनवास शक्ति और लोकप्रियता प्राप्त कर रहा है। जैसे ही यह बाहर से पहुंच के लिए और अधिक "खुला" हो जाता है, इसके स्थान दृढ़ता से तय हो जाएंगे।

ऑडियो

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



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



और अब HTML5 ने उन्हें इस खिताब से हटाने की योजना बनाई है।



HTML5 में एक पृष्ठ में एक ऑडियो फ़ाइल सम्मिलित करना सरल दिखता है:

 <audio src="witchitalineman.mp3"> </audio>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

लेकिन यह बहुत आसान है। आपको शायद थोड़ी और सुविधाओं की आवश्यकता होगी।



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

 <audio src="witchitalineman.mp3" autoplay> </audio>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

अगर मैं देखता हूं कि आप इस तरह के उद्देश्यों के लिए ऑटोप्ले का उपयोग कर रहे हैं, तो मुझसे मिलने की उम्मीद न करें।



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



हालांकि, बूलियन मापदंडों को बूलियन मूल्यों के साथ भ्रमित नहीं होना चाहिए। यह सोचना बहाना है कि बुलियन पैरामीटर सही या गलत होना चाहिए, लेकिन ऐसा नहीं है। इसके अस्तित्व का बहुत सार पहले से ही बूलियन है, अर्थात् बाइनरी - यह या तो मौजूद है ( सच ) या यह बिल्कुल ( झूठ ) मौजूद नहीं है। यहां तक ​​कि अगर आप इस तरह की विशेषता के लिए एक मूल्य जोड़ते हैं, तो इसका कोई प्रभाव नहीं पड़ेगा: ऑटोप्ले = "झूठा" या ऑटोप्ले = "नो थैंक्स" केवल ऑटोप्ले के समान है।



यदि आप विशेष रूप से एक्सएचटीएमएल सिंटैक्स का उपयोग करते हैं, तो आपके लिए - ऑटोप्ले = "ऑटोप्ले" । अतिरेक विभाग के अंतर्राष्ट्रीय विभाग द्वारा अनुमोदित।



जब ऑडियो फ़ाइल का ऑटो-प्लेबैक पर्याप्त नहीं लगता है, तो आप एक और बुलियन पैरामीटर - लूप भी जोड़ सकते हैं, जो ध्वनि को लूप करेगा और यातना को अंतहीन बना देगा।

 <audio src="witchitalineman.mp3" autoplay loop> </audio>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

जब आप मुझसे मिलते हैं तो इन विकल्पों का संयोजन आपके जीवित रहने की संभावनाओं को और कम कर देगा।

सब कुछ नियंत्रण में है

लेकिन चलो अच्छे के लिए ऑडियो तत्व का उपयोग करने के तरीके पर आगे बढ़ें। प्लेबैक को नियंत्रित करने की क्षमता को जोड़ना तर्कसंगत है, और यह आसानी से बूलियन पैरामीटर नियंत्रण का उपयोग करके किया जा सकता है।

 <audio src="witchitalineman.mp3" controls> </audio>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

यह प्ले-पॉज़ बटन और वॉल्यूम नियंत्रण के लिए मानक ब्राउज़र नियंत्रणों के प्रदर्शन को सक्षम करेगा।

नियंत्रण देशी ब्राउज़र-आधारित प्लेबैक नियंत्रण इंटरफ़ेस प्रदर्शित करता है

यदि आपको ब्राउज़र द्वारा परिभाषित नियंत्रण की शैली पसंद नहीं है, तो आप उन्हें अपनी पसंद के अनुसार अनुकूलित कर सकते हैं। जावास्क्रिप्ट का उपयोग करते हुए, आप ऑडियो एपीआई का उपयोग कर सकते हैं, जो प्ले और पॉज़ विधियों और वॉल्यूम प्रॉपर्टी तक पहुंच प्रदान करता है। यहाँ बटन तत्वों और टैग के अंदर अप्रतिष्ठित घटना संचालकों का उपयोग करके इस तरह के अनुकूलन का एक मोटा उदाहरण है:

 <audio id="player" src="witchitalineman.mp3"> </audio> <div> <button onclick="document.getElementById('player').play()"> Play </button> <button onclick="document.getElementById('player').pause()"> Pause </button> <button onclick="document.getElementById('player').volume += 0.1"> Volume Up </button> <button onclick="document.getElementById('player').volume -= 0.1"> Volume Down </button> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

बटन तत्वों का उपयोग करके किए गए कस्टम नियंत्रण।

बफरिंग

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



यह एक बहुत ही उपयोगी विकल्प होगा, लेकिन दुर्भाग्य से सफारी आगे बढ़ गई। इस ब्राउज़र ने ऑटोबफ़र को अनदेखा करते हुए ऑडियो फ़ाइल को प्रीलोड करना शुरू किया। और चूंकि - आपको याद है - ऑटोबफ़र एक बूलियन पैरामीटर है, आप इसे प्री-लोडिंग को प्रतिबंधित करने के लिए उपयोग नहीं कर सकते हैं: ऑटोबफ़र = "झूठा" ऑटोबॉफ़र = "सच" के समान है , जैसे सामान्य रूप से कोई भी मूल्य ( बग का वर्णन )।



इसलिए अब ऑटोबफ़र को प्रीलोड पैरामीटर से बदल दिया गया है। यह बूलियन नहीं है, यह निम्नलिखित तीन मूल्यों में से एक लेता है: कोई नहीं , ऑटो, और मेटाडेटा । प्रीलोड = "कोई नहीं" का उपयोग करते हुए, हम ब्राउज़र को स्पष्ट रूप से बताते हैं कि इस फ़ाइल को फिर से लोड करने की आवश्यकता नहीं है।

 <audio src="witchitalineman.mp3" controls preload="none"> </audio>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

यदि आपके पास प्रति पृष्ठ केवल एक ऑडियो तत्व है, तो प्रीलोड = "ऑटो" उचित और तार्किक है। लेकिन आपको ऐसा नहीं करना चाहिए अगर उनमें से कई हैं, तो सबसे तेज़ और / या असीमित इंटरनेट के साथ आगंतुकों को अपमानित करने के लिए नहीं।

मैं "अंकुश" गाऊंगा, तुम "अंकुश" गाओगे

ऐसा लगता है जैसे ऑडियो तत्व हर चीज में परफेक्ट है। स्पष्ट रूप से कहीं न कहीं एक पकड़ है। दुर्भाग्य से, यह ऐसा है, लेकिन तत्व के विनिर्देश के साथ ऐसा नहीं है, लेकिन ऑडियो प्रारूपों के साथ।



हालांकि वर्तमान में एमपी 3 सबसे आम है, यह प्रारूप खुला नहीं है। उसके साथ काम करने के अवसर के लिए, पेटेंट धारकों को एक निश्चित राशि का भुगतान करना आवश्यक है। Apple या Adobe जैसे बड़े निगमों के लिए, यह स्पष्ट रूप से एक समस्या नहीं है, छोटी कंपनियों और खुले स्रोत समूहों के विपरीत। यही कारण है कि एमपी 3 सफारी में बहुत अच्छा काम करता है, लेकिन यह फ़ायरफ़ॉक्स में नहीं चलता है।



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



सौभाग्य से, केवल एक विशिष्ट प्रारूप के पक्ष में एक क्रूर विकल्प बनाने की आवश्यकता नहीं है। <ऑडियो> टैग में src पैरामीटर के बजाय, आप विभिन्न फ़ाइलों के लिए इसमें संलग्न कई स्रोत तत्वों का उपयोग कर सकते हैं:

 <audio controls> <source src="witchitalineman.ogg"> <source src="witchitalineman.mp3"> </audio>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

एक ऑग वॉर्बिस-सक्षम ब्राउज़र पहली फ़ाइल उठाएगा और आगे नहीं बढ़ेगा। एक ब्राउज़र जो MP3s चला सकता है लेकिन यह नहीं समझता कि Ogg पहली फ़ाइल को छोड़ देगा और दूसरी को लोड करेगा।



आप प्रत्येक फ़ाइल के लिए माइम-प्रकार निर्दिष्ट करके उनकी पसंद में उनकी मदद कर सकते हैं:

 <audio controls> <source src="witchitalineman.ogg" type="audio/ogg"> <source src="witchitalineman.mp3" type="audio/mpeg"> </audio>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

स्रोत तत्व एक एकल, गैर-कंटेनर तत्व है, इसलिए यदि आप XHTML सिंटैक्स का उपयोग करते हैं, तो आपको एक स्लैश के साथ टैग को बंद करना होगा: <source /> ।

के लिए तोहफा नहीं दिया

कई स्रोतों को निर्दिष्ट करने की क्षमता महान है, लेकिन ऐसे ब्राउज़र हैं जो ऑडियो तत्व का समर्थन नहीं करते हैं। ठीक है, आप समझते हैं कि मेरा मतलब कौन है।



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

 <audio controls> <source src="witchitalineman.ogg" type="audio/ogg"> <source src="witchitalineman.mp3" type="audio/mpeg"> <object type="application/x-shockwave-flash" data="player.swf?soundFile=witchitalineman.mp3"> <param name="movie" value="player.swf?soundFile=witchitalineman.mp3"> </object> </audio>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

आप और भी आगे बढ़ सकते हैं। ऑब्जेक्ट तत्व स्वयं वैकल्पिक सामग्री के सम्मिलन की भी अनुमति देता है - उन लोगों के लिए जो ब्राउज़र के साथ बिल्कुल गलत हैं, आप एक मानक लिंक बना सकते हैं:

 <audio controls> <source src="witchitalineman.ogg" type="audio/ogg"> <source src="witchitalineman.mp3" type="audio/mpeg"> <object type="application/x-shockwave-flash" data="player.swf?soundFile=witchitalineman.mp3"> <param name="movie" value="player.swf?soundFile=witchitalineman.mp3"> <a href="witchitalineman.mp3">Download the song</a> </object> </audio>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

इस प्रकार, प्राथमिकताएँ निम्नलिखित क्रम में हैं:

1. ऑडियो तत्व के माध्यम से ऑग वॉर्बिस ऑडियो
2. ऑडियो तत्व के माध्यम से एमपी 3 ऑडियो
3. फ्लैश के माध्यम से ध्वनि
4. फ़ाइल को सीधे डाउनलोड करने के लिए लिंक

सामग्री उपलब्धता

इसकी सामग्री का प्रतिनिधित्व करने के लिए वैकल्पिक तरीकों को निर्दिष्ट करने के लिए ऑडियो तत्व मॉडल बहुत सुविधाजनक है। लेकिन अगर, उदाहरण के लिए, आप उन लोगों के लिए एक गीत का एक पाठ संस्करण प्रदान करना चाहते हैं जो इसे नहीं सुन सकते हैं, तो निम्न कार्य न करें:

 <audio controls> <source src="witchitalineman.ogg" type="audio/ogg"> <source src="witchitalineman.mp3" type="audio/mpeg"> <p>I am a lineman for the county...</p> </audio>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

इस स्थिति में, सामग्री <p> केवल तभी प्रदर्शित होगी जब आगंतुक का ब्राउज़र ऑडियो तत्व का समर्थन नहीं करता है। यह एक आधुनिक ब्राउज़र वाले बधिर उपयोगकर्ता के लिए उपयोगी नहीं होगा। इसके अलावा, गीत अन्य सभी के लिए उपयोगी हो सकता है - फिर इसे क्यों छिपाएं?

 <audio controls> <source src="witchitalineman.ogg" type="audio/ogg"> <source src="witchitalineman.mp3" type="audio/mpeg"> </audio> <p>I am a lineman for the county...</p>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

वीडियो

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



वीडियो तत्व ऑडियो के समान कार्य करता है: समान पैरामीटर ऑटोप्ले , लूप , प्रीलोड ; src विशेषता या कई नेस्टेड स्रोत तत्वों के साथ एक ही प्रणाली; उसी तरह, आप नियंत्रणों का उपयोग करके एक मानक नियंत्रण इंटरफ़ेस जोड़ सकते हैं, या अपना खुद का बना सकते हैं।



ऑडियो और वीडियो के बीच मुख्य अंतर यह है कि उत्तरार्द्ध आमतौर पर पृष्ठ पर थोड़ा अधिक स्थान लेता है, इसलिए आप संभवतः सटीक आयाम निर्दिष्ट करना चाहेंगे:

 <video src="movie.mp4" controls width="360" height="240"> </video>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

और क्या दिलचस्प हो सकता है पोस्टर पैरामीटर का उपयोग करके एक तस्वीर के रूप में एक थंबनेल जोड़ना है:

 <video src="movie.mp4" controls width="360" height="240" poster="placeholder.jpg"> </video>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

वीडियो चलने से पहले एक पूर्वावलोकन प्रदर्शित किया जाता है।

सबसे सुखद खबर यह नहीं है कि वीडियो वातावरण में प्रारूपों के बीच का संघर्ष ऑडियो की तुलना में भी कठिन है। मुख्य खिलाड़ी: MP4 (एक पेटेंट के साथ संलग्न) और थेरा वीडियो (स्वतंत्र और स्वच्छ)। लेकिन आप पहले से ही जानते हैं कि इस तरह की समस्याओं का समाधान कैसे किया जाता है:

 <video controls width="360" height="240" poster="placeholder.jpg"> <source src="movie.ogv" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> <object type="application/x-shockwave-flash" width="360" height="240" data="player.swf?file=movie.mp4"> <param name="movie" value="player.swf?file=movie.mp4"> <a href="movie.mp4">Download the movie</a> </object> </video>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

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

फैशनेबल, स्टाइलिश, देशी

मानक मार्कअप भाषा टूल के साथ वीडियो एम्बेड करने की क्षमता img तत्व बनाने के बाद से सबसे रोमांचक नवाचार हो सकती है। यहां तक ​​कि Google जैसे बड़े खिलाड़ी भी इसको लेकर उत्साहित नहीं हैं। उदाहरण के लिए, नए YouTube के लिए उसका इरादा क्या है: www.youtube.com/html5



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

वीडियो तत्व CSS3 का सामना करता है। प्लगइन के साथ ऐसा करने की कोशिश करें।

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