HTML 5.0 में नया क्या है? भाग 2: ऑडियो और वीडियो तत्वों का कार्यान्वयन।

लेख की शुरुआत



हाल के वर्षों में, वेबसाइट पृष्ठों पर ऑडियो और वीडियो संसाधनों का प्लेसमेंट तेजी से लोकप्रिय हो गया है, और YouTube , Viddler , Revver , MySpace जैसी परियोजनाओं ने इन तत्वों को उपयोगकर्ताओं के लिए और अधिक सुलभ बनाने की संभावना बना दी है। हालाँकि, वर्तमान में HTML प्रारूप में ऑडियो और वीडियो को एम्बेड करने की व्यापक क्षमताएं नहीं हैं, डेवलपर्स फ़्लैश का उपयोग करके इसे लागू करने का प्रयास कर रहे हैं। यद्यपि आप विभिन्न प्लगइन्स के कार्यान्वयन का उपयोग कर सकते हैं, जैसे कि QuickTime, विंडोज मीडिया, आदि। लेकिन फ्लैश कार्यान्वयन वर्तमान में सबसे आम तरीका है, साथ ही साथ विभिन्न ब्राउज़रों के साथ सबसे अधिक संगत है।



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





नए तत्व " वीडियो " और " ऑडियो " इस समस्या को हल करना बहुत आसान बनाते हैं। अधिकांश एपीआई इन दोनों तत्वों के बीच वितरित होते हैं, एकमात्र अंतर दृश्य और गैर-दृश्य मीडिया संसाधनों के बीच का अंतर है।



ओपेरा और वेबकीट के डेवलपर्स ने " वीडियो " तत्व के लिए आंशिक समर्थन के साथ एक उत्पाद बनाया। आप इन प्रायोगिक उत्पादों को ओपेरा और वेबकिट से डाउनलोड और परीक्षण कर सकते हैं। ओपेरा Ogg Theora स्वरूपों का समर्थन करता है, और WebKit सभी QuickTime प्रारूपों का समर्थन करता है, यहां तक ​​कि तृतीय-पक्ष प्रकाशकों द्वारा विकसित भी।



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

<video src="video.ogv" controls poster="poster.jpg"

width="320" height="240">

Download movie



वैकल्पिक विशेषता " पोस्टर " आपको एक तस्वीर सेट करने की अनुमति देता है जिसे वीडियो चलने से पहले प्रदर्शित किया जाएगा। यद्यपि कई प्रारूप हैं जो डिफ़ॉल्ट रूप से ऐसी तस्वीर सेट करते हैं (जैसे कि एमपीईजी -4), यह समाधान एक विकल्प है, किसी भी प्रारूप के लिए समर्थन प्रदान करता है।



" ऑडियो " टैग का उपयोग करके ऑडियो तत्वों को पेज से जोड़ना बहुत आसान है। " ऑडियो " और " वीडियो " तत्वों के अधिकांश गुण समान हैं, लेकिन स्पष्ट कारणों से, ऑडियो तत्व की कोई डिफ़ॉल्ट चौड़ाई, ऊंचाई या छवि गुण नहीं हैं।

Download song



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

      

        
        
        
      

    

   <स्रोत src = "music.mp3" प्रकार = "ऑडियो / एमपीईजी">
 </ ऑडियो> </ code> </ blockquote>

 डेवलपर्स के लिए जो वेब पेज के समग्र डिजाइन को फिट करने के लिए उपयोगकर्ता इंटरफ़ेस पर अधिक नियंत्रण चाहते हैं, एपीआई एक्सटेंशन आपको कई तरीकों और घटनाओं का उपयोग करने की अनुमति देते हैं जो स्क्रिप्ट को मीडिया प्लेबैक को नियंत्रित करने की अनुमति देते हैं।  सबसे सरल तरीके हैं: <strong> खेल () </ strong>, <strong> ठहराव () </ strong>, और शुरुआत में लौटने के लिए <strong> वर्तमान समय </ strong> सेट करना। 
 <blockquote> <code>
 <वीडियो src = "video.ogg" id = "वीडियो"> </ वीडियो>
 <Script>
   var वीडियो = document.getElementById ("वीडियो");
 </ Script>
 <p> <बटन प्रकार = "बटन" onclick = "video.play ();"> प्ले </ बटन>
    <बटन प्रकार = "बटन" onclick = "video.pause ();"> रोकें </ बटन>
    <बटन प्रकार = "बटन" onclick = "video.currentTime = 0;">
    << रिवाइंड </ बटन>
 </ code> </ blockquote>

 इस लेख में कई अन्य वीडियो और ऑडियो तत्व और एपीआई एक्सटेंशन भी शामिल नहीं हैं।  आप <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/section-video.html#video"> वर्तमान HTML 5 में इस बारे में और अधिक पढ़ सकते हैं </ एक>
 </ Habracut>