HTML5 - ऑडियो और वीडियो

HTML5 की विशेषताओं में फ्लैश की आवश्यकता के बिना देशी ऑडियो और वीडियो समर्थन शामिल हैं।

एचटीएमएल 5 <ऑडियो> और <वीडियो> टैग मीडिया को वेबसाइट पर जोड़ना सरल बनाते हैं। आपको सेट करने की आवश्यकता हैsrc मीडिया स्रोत की पहचान करने के लिए विशेषता और एक नियंत्रण विशेषता शामिल है ताकि उपयोगकर्ता मीडिया को चला सके और रोक सके।

वीडियो एम्बेड करना

यहां आपके वेबपृष्ठ में वीडियो फ़ाइल एम्बेड करने का सबसे सरल रूप है -

<video src = "foo.mp4"  width = "300" height = "200" controls>
   Your browser does not support the <video> element.   
</video>

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

Ogg - थेडोरा वीडियो कोडेक और वोरबिस ऑडियो कोडेक के साथ ऑग फाइलें।
mpeg4 - H464 वीडियो कोडेक और AAC ऑडियो कोडेक के साथ MPEG4 फाइलें।

आप मीडिया प्रकार और कई अन्य विशेषताओं के साथ मीडिया को निर्दिष्ट करने के लिए <स्रोत> टैग का उपयोग कर सकते हैं। एक वीडियो तत्व कई स्रोत तत्वों और ब्राउज़र को पहले मान्यता प्राप्त प्रारूप का उपयोग करने की अनुमति देता है -

<!DOCTYPE HTML>

<html>
   <body>
      
      <video  width = "300" height = "200" controls autoplay>
         <source src = "/html5/foo.ogg" type ="video/ogg" />
         <source src = "/html5/foo.mp4" type = "video/mp4" />
         Your browser does not support the <video> element.
      </video>
      
   </body>
</html>

यह निम्नलिखित परिणाम का उत्पादन करेगा -

वीडियो विशेषता विशिष्टता

HTML5 वीडियो टैग में लुक और फील को नियंत्रित करने और नियंत्रण की विभिन्न कार्यक्षमताओं के लिए कई विशेषताएं हो सकती हैं -

अनु क्रमांक।	विशेषता और विवरण
1	autoplay यदि यह निर्दिष्ट किया गया है तो यह बूलियन विशेषता है, वीडियो स्वचालित रूप से वापस खेलना शुरू कर देगा जैसे ही डेटा को लोड करने के लिए रोक के बिना ऐसा कर सकता है।
2	autobuffer यदि यह निर्दिष्ट किया गया है तो यह बूलियन विशेषता है, वीडियो स्वतः बफ़र करना शुरू कर देगा, भले ही यह स्वचालित रूप से खेलने के लिए सेट न हो।
3	controls यदि यह विशेषता मौजूद है, तो यह उपयोगकर्ता को वीडियो प्लेबैक को नियंत्रित करने की अनुमति देगा, जिसमें वॉल्यूम, मांग और प्लेबैक को फिर से शुरू करना शामिल है।
4	height यह विशेषता सीएसएस पिक्सल में वीडियो के प्रदर्शन क्षेत्र की ऊंचाई को निर्दिष्ट करती है।
5	loop निर्दिष्ट होने पर यह बूलियन विशेषता वीडियो को अंत में पहुंचने के बाद स्वचालित रूप से वापस शुरू करने की अनुमति देगा।
6	preload यह विशेषता निर्दिष्ट करती है कि वीडियो को पेज लोड पर लोड किया जाएगा, और चलाने के लिए तैयार किया जाएगा। अगर ऑटोप्ले मौजूद है तो नजरअंदाज कर दिया।
7	poster यह एक छवि का URL है, जब तक कि उपयोगकर्ता खेलता या दिखाता नहीं है।
8	src एम्बेड करने के लिए वीडियो का URL। यह वैकल्पिक है; वीडियो को एम्बेड करने के लिए निर्दिष्ट करने के लिए आप वीडियो ब्लॉक के भीतर <स्रोत> तत्व का उपयोग कर सकते हैं।
9	width यह विशेषता CSS पिक्सेल में वीडियो के डिस्प्ले क्षेत्र की चौड़ाई को निर्दिष्ट करती है।

ऑडियो एम्बेड करना

एचटीएमएल 5 <ऑडियो> टैग का समर्थन करता है जिसका उपयोग HTML या XHTML दस्तावेज़ में ध्वनि सामग्री को एम्बेड करने के लिए किया जाता है।

<audio src = "foo.wav" controls autoplay>
   Your browser does not support the <audio> element.   
</audio>

वर्तमान HTML5 ड्राफ्ट विनिर्देश निर्दिष्ट नहीं करता है कि ऑडियो प्रारूप ब्राउज़र को ऑडियो टैग में किसका समर्थन करना चाहिए। लेकिन सबसे अधिक उपयोग किए जाने वाले ऑडियो प्रारूप हैंogg, mp3 तथा wav।

आप <source & ggt का उपयोग कर सकते हैं; मीडिया प्रकार और कई अन्य विशेषताओं के साथ मीडिया को निर्दिष्ट करने के लिए टैग। एक ऑडियो तत्व कई स्रोत तत्वों और ब्राउज़र को पहले मान्यता प्राप्त प्रारूप का उपयोग करने की अनुमति देता है -

<!DOCTYPE HTML>

<html>
   <body>
      
      <audio controls autoplay>
         <source src = "/html5/audio.ogg" type = "audio/ogg" />
         <source src = "/html5/audio.wav" type = "audio/wav" />
         Your browser does not support the <audio> element.
      </audio>
      
   </body>
</html>

यह निम्नलिखित परिणाम का उत्पादन करेगा -

ऑडियो विशेषता विशिष्टता

HTML5 ऑडियो टैग में लुक और फील को नियंत्रित करने और नियंत्रण की विभिन्न कार्यक्षमताओं के लिए कई विशेषताएं हो सकती हैं -

अनु क्रमांक।	विशेषता और विवरण
1	autoplay यदि यह निर्दिष्ट किया गया है तो यह बूलियन विशेषता है, डेटा को लोड करने को समाप्त किए बिना ऐसा करने के लिए ऑडियो स्वचालित रूप से वापस खेलना शुरू कर देगा।
2	autobuffer यह बूलियन विशेषता निर्दिष्ट होने पर, ऑडियो स्वतः बफ़र करना शुरू कर देगा, भले ही यह स्वचालित रूप से खेलने के लिए सेट न हो।
3	controls यदि यह विशेषता मौजूद है, तो यह उपयोगकर्ता को ऑडियो प्लेबैक को नियंत्रित करने की अनुमति देगा, जिसमें वॉल्यूम, मांग और प्लेबैक को फिर से शुरू करना शामिल है।
4	loop निर्दिष्ट होने पर यह बूलियन विशेषता, अंत में पहुंचने के बाद ऑडियो को स्वचालित रूप से वापस शुरू करने की अनुमति देगा।
5	preload यह विशेषता निर्दिष्ट करती है कि ऑडियो पृष्ठ लोड पर लोड किया जाएगा, और चलाने के लिए तैयार होगा। अगर ऑटोप्ले मौजूद है तो नजरअंदाज कर दिया।
6	src एम्बेड करने के लिए ऑडियो का URL। यह वैकल्पिक है; वीडियो को एम्बेड करने के लिए निर्दिष्ट करने के लिए आप वीडियो ब्लॉक के भीतर <स्रोत> तत्व का उपयोग कर सकते हैं।

मीडिया इवेंट्स को हैंडल करना

HTML5 ऑडियो और वीडियो टैग में जावास्क्रिप्ट का उपयोग करके नियंत्रण की विभिन्न कार्यात्मकताओं को नियंत्रित करने के लिए कई विशेषताएं हो सकती हैं -

क्र.सं.	घटना विवरण
1	abort प्लेबैक समाप्त होने पर यह ईवेंट उत्पन्न होता है।
2	canplay यह घटना तब उत्पन्न होती है जब पर्याप्त डेटा उपलब्ध होता है जिसे मीडिया चलाया जा सकता है।
3	ended प्लेबैक पूरा होने पर यह घटना उत्पन्न होती है।
4	error यह ईवेंट तब उत्पन्न होता है जब कोई त्रुटि होती है।
5	loadeddata यह घटना तब उत्पन्न होती है जब मीडिया के पहले फ्रेम ने लोडिंग समाप्त कर दी है।
6	loadstart यह घटना मीडिया के लोडिंग शुरू होने पर उत्पन्न होती है।
7	pause यह घटना प्लेबैक उत्पन्न होने पर उत्पन्न होती है।
8	play यह घटना प्लेबैक शुरू होने या फिर से शुरू होने पर उत्पन्न होती है।
9	progress यह घटना मीडिया को डाउनलोड करने की प्रगति को सूचित करने के लिए समय-समय पर उत्पन्न होती है।
10	ratechange प्लेबैक गति में परिवर्तन होने पर यह घटना उत्पन्न होती है।
1 1	seeked यह घटना तब उत्पन्न होती है जब कोई ऑपरेशन पूरा होता है।
12	seeking यह घटना तब उत्पन्न होती है जब कोई ऑपरेशन शुरू होता है।
13	suspend मीडिया के लोडिंग को निलंबित करने पर यह ईवेंट उत्पन्न होता है।
14	volumechange ऑडियो आयतन में परिवर्तन होने पर यह घटना उत्पन्न होती है।
15	waiting यह ईवेंट तब उत्पन्न होता है जब अनुरोधित ऑपरेशन (जैसे प्लेबैक) दूसरे ऑपरेशन के पूरा होने में देरी हो जाती है (जैसे कि एक तलाश)।

निम्नलिखित उदाहरण है जो दिए गए वीडियो को चलाने की अनुमति देता है -

<!DOCTYPE HTML>

<html>
   <head>
   
      <script type = "text/javascript">
         function PlayVideo() {
            var v = document.getElementsByTagName("video")[0];  
            v.play(); 
         }
      </script>
   </head>
   
   <body>
   
      <form>         
         <video width = "300" height = "200" src = "/html5/foo.mp4">
         Your browser does not support the video element.
         </video>
         <br />
         <input type = "button" onclick = "PlayVideo();" value = "Play"/>
      </form>
      
   </body>
</html>

यह निम्नलिखित परिणाम का उत्पादन करेगा -

मीडिया प्रकार के लिए सर्वर कॉन्फ़िगर करना

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

AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4