HTML वीडियो

HTML में वीडियो प्लेय करने के तरीके बहुत हैं。

उदाहरण

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

खुद अभिजातीय करें

समस्या, समस्या और समाधान

HTML में वीडियो प्लेय करना बहुत मुश्किल है!

आपको बहुत सी नैतिकताओं को जानना होगा, ताकि आपका वीडियो फाइल सभी ब्राउज़र (इंटरनेट एक्सप्लोरर, क्रोम, फायरफॉक्स, सैफारी, ओपेरा) और सभी हार्डवेयर (PC, Mac, iPad, iPhone) पर प्लेय हो सके。

इस चैप्टर में, CodeW3C.com आपके लिए समस्याओं और समाधान को समझाता है।

एहमेल <embed> टैग का इस्तेमाल करें

<embed> टैग का काम एहमेल पेज में मल्टीमीडिया एलीमेंट को एम्बेड करना है।

नीचे एहमेल कोड वेब पेज में एम्बेड किया गया फ्लैश वीडियो दिखाता है:

उदाहरण

<embed src="movie.swf" height="200" width="200"/>

खुद अभिजातीय करें

समस्या

  • HTML4 <embed> टैग को पहचान नहीं करता। आपका पेज जांच से नहीं गुज़रा है।
  • अगर ब्राउज़र फ्लैश को समर्थन नहीं करता, तो वीडियो प्लेय नहीं होगा
  • iPad और iPhone फ्लैश वीडियो को दिखाने में नहीं सकते。
  • अगर आप वीडियो को अन्य फॉर्मेट में बदलेंगे, तो यह अभी भी सभी ब्राउज़र में प्लेय नहीं होगा。

एहमेल <object> टैग का इस्तेमाल करें

<object> टैग का काम एहमेल पेज में मल्टीमीडिया एलीमेंट को एम्बेड करना है।

नीचे एहमेल फ्रेमेंट वेब पेज में एम्बेड किया गया फ्लैश वीडियो दिखाता है:

उदाहरण

<object data="movie.swf" height="200" width="200"/>

खुद अभिजातीय करें

समस्या

  • अगर ब्राउज़र फ्लैश को समर्थन नहीं करता, तो वीडियो प्लेय नहीं होगा。
  • iPad और iPhone फ्लैश वीडियो को दिखाने में नहीं सकते。
  • अगर आप वीडियो को अन्य फॉर्मेट में बदलेंगे, तो यह अभी भी सभी ब्राउज़र में प्लेय नहीं होगा。

एहमेल <video> टैग का इस्तेमाल करें

<video> एहमेल 5 में नया टैग है।

<video> टैग का काम है कि वीडियो एलीमेंट को HTML पेज में शामिल करना।

नीचे दिए गए HTML शीट एक ogg, mp4 या webm फॉर्मेट के वीडियो को वेबपेज में शामिल करेगा:

उदाहरण

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
आपका ब्राउज़र वीडियो टैग को समर्थित नहीं करता。
</video>

खुद अभिजातीय करें

समस्या

  • आपको वीडियो को कई विभिन्न फॉर्मेट में बदलना चाहिए
  • <video> एलीमेंट पुराने ब्राउज़रों में निष्क्रिय है。
  • <video> एलीमेंट HTML 4 और XHTML के द्वारा वेरिफ़िकेशन में नहीं होता है。

सबसे अच्छा HTML समाधान

HTML 5 + <object> + <embed>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

खुद अभिजातीय करें

इस उदाहरण में 4 विभिन्न वीडियो फॉर्मेटों का उपयोग किया गया है।HTML 5 <video> एलीमेंट वीडियो को mp4, ogg या webm फॉर्मेट में एक के साथ प्ले करने की कोशिश करेगा। अगर सभी असफल होते हैं, तो <embed> एलीमेंट के लिए बैकअप होगा。

समस्या

  • आपको वीडियो को कई विभिन्न फॉर्मेट में बदलना चाहिए
  • <video> एलीमेंट HTML 4 और XHTML के द्वारा वेरिफ़िकेशन में नहीं होता है。
  • <embed> एलीमेंट HTML 4 और XHTML के द्वारा वेरिफ़िकेशन में नहीं होता है。

नोटः<!DOCTYPE html> (HTML5) का उपयोग करके वेरिफ़िकेशन समस्या को हल करें।

优酷解决方案

HTML में वीडियो दिखाने का सबसे सरल तरीका यूट्यूब जैसे वीडियो वेबसाइट का उपयोग करना है。

आप यहाँ पर वीडियो चाहते हैं तो आपको वीडियो यूट्यूब जैसे वीडियो वेबसाइट पर अपलोड करना चाहिए और फिर आपके वेबपेज में HTML कोड जोड़ें ताकि वीडियो प्ले हो सके:

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" 
width="480" height="400" 
type="application/x-shockwave-flash">
</embed>

खुद अभिजातीय करें

अधिकार का उपयोग

यदि वेब पृष्ठ में मीडिया फ़ाइल के लिंक हो, तो अधिकांश ब्राउज़र 'सहायक अनुप्रयोग' का उपयोग करते हैं और फ़ाइल को प्ले करते हैं。

नीचे दिए गए कोड स्प्लैश एक AVI फ़ाइल के लिंक को दिखाता है।यदि उपयोगकर्ता इस लिंक पर क्लिक करता है, तो ब्राउज़र 'सहायक अनुप्रयोग' जैसे Windows Media Player चलाता है और इस AVI फ़ाइल को प्ले करता है:

उदाहरण

<a href="movie.swf">एक वीडियो फ़ाइल चालू करें</a>

खुद अभिजातीय करें

लाइन वीडियो के बारे में एक टिप्पणी

जब वीडियो वेब पृष्ठ में शामिल होता है, तो इसे लाइन वीडियो कहा जाता है。

अगर आप वेब एप्लीकेशन में लाइन वीडियो का इस्तेमाल करने वाले हैं, तो आपको ध्यान देना चाहिए कि अनेक लोगों को लाइन वीडियो नाराजगार लगता है。

साथ ही, ध्यान दें कि उपयोगकर्ता पहले से ही ब्राउज़र में लाइन वीडियो विकल्प को बंद कर सकते हैं।

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

HTML 4.01 मल्टीमीडिया टैग

टैग वर्णन
<applet> निषेधितइम्बैड applet डिफ़ाइनिंग
<embed> निषेधितइम्बैड ऑब्जेक्ट डिफ़ाइनिंग (HTML5 में अनुमत)
<object> इम्बैड ऑब्जेक्ट डिफ़ाइनिंग
<param> ऑब्जेक्ट के पारामीटर डिफ़ाइनिंग

HTML 5 मल्टीमीडिया टैग

टैग वर्णन
<video> टैग डिफ़ाइनिंग आवाज, जैसे संगीत या अन्य आवाज़ी स्रोत।
<embed> टैग डिफ़ाइनिंग इम्बैड किए गए सामग्री, जैसे एक्सटेंशन।