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

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

उदाहरण

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

स्वयं उसे प्रयोग कीजिए

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

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

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

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

एचटीएमएल <embed> टैग का उपयोग करें

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

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

उदाहरण

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

स्वयं उसे प्रयोग कीजिए

समस्या

  • एचटीएमएल4 <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> टैग डिफ़ाइनेशन इम्बेडिड विषय, जैसे प्लगइन।