एचटीएमएल वीडियो

HTTP विधि

उदाहरण

<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>

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

चयनीय कोर्स

कोर्स परिष्कार:

एचटीएमएल में वीडियो प्लेय करने के तरीके बहुत हैं।

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

एचटीएमएल में वीडियो प्लेय करना बहुत कठिन है!

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

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

उदाहरण

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

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

समस्या

  • नीचे दिए एचटीएमएल कोड वेब पृष्ठ में एम्बेड किया फ्लैश वीडियो दिखाता है:
  • <embed src="movie.swf" height="200" width="200"/>
  • यदि ब्राउज़र फ्लैश को समर्थन नहीं करता, तो वीडियो प्लेय नहीं होगा।
  • iPad और iPhone फ्लैश वीडियो दिखाने में नहीं हो सकते।

HTML4 <embed> टैग को पहचान नहीं करता। आपका पृष्ठ जांच से नहीं गुज़रा।

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

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

उदाहरण

नीचे दिए एचटीएमएल खण्ड वेब पृष्ठ में एम्बेड किया फ्लैश वीडियो दिखाता है:

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

समस्या

  • <object data="movie.swf" height="200" width="200"/>
  • यदि ब्राउज़र फ्लैश को समर्थन नहीं करता, तो वीडियो प्लेय नहीं होगा।
  • iPad और iPhone फ्लैश वीडियो दिखाने में नहीं हो सकते।

यदि आप वीडियो को अन्य फॉर्मेट में बदलेंगे, तो यह अब भी सभी ब्राउज़र में प्लेय नहीं होगा।

<video> एहमे HTML 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> टैग डिफाइनेशन इम्बेडिड किए हुए सामग्री, जैसे प्लगइन।