दोस्तों, आज के इस लेख (Video Tag in HTML) में हम Video Tag के बारे में जानने वाले है. सबसे पहले हम आपको बता दे की Video Tag का इस्तेमाल Webpage में वीडियो Insert करने के लिए किया जाता है.
अगर कोई Website पर वीडियो Display हो रहा है तो आप समझ जाना की उसे वीडियो को Display करने के लिए Video Tag का इस्तेमाल किया गया है. Webpage में वीडियो Insert करने के दो तरीके है. हम इन दोनों तरीको को एक-एक कर के विस्तार से देखेंगे। हम HTML के Video Tag के कुछ महत्पूर्ण Attributes के बारे में भी देखेंगे। इसलिए आप इस पोस्ट को सुरु से अंत तक जरूर पढ़ना।
ये भी पढ़े: Heading Tags in HTML
Video Tag in HTML
Video Tag HTML Tags में से एक बहुत ही महत्पूर्ण टैग है. इस टैग का इस्तेमाल Developers वेब पेज में वीडियो लगाने के लिए करते है. अगर आप अपने Website में किसी भी तरह का वीडियो लगाना चाहते है तो आप Video Tag का इस्तेमाल कर सकते है.
इस टैग को HTML 5.0 में लाया गया था. उससे पहले Websiite पर वीडियो प्ले करने के लिए वीडियो को सबसे पहले वेबसाइट में Embed किया जाता था और फिर किसी Third Party Plugin की मदद से वीडियो को प्ले किया जाता था. जिससे Programmers को बहुत सारे Problems का सामना करना पड़ता था. Programmers के प्रॉब्लम को देखते हुए HTML के Developers ने HTML 5 में वीडियो टैग Include कर दिया।
वीडियो टैग एक Paired Tag है. इसका मतलब ये है की इस टैग का Opening और Closing टैग दोनों होता है. वीडियो टैग का Syntax कुछ इस तरह का होता है :
<video src="type video source here"> </video>
HTML डॉक्यूमेंट में वीडियो Insert करने के दो तरीके होते है और इन दोनों तरीको का Syntax अलग-अलग होता है. आइये इन दोनों तरीको को एक-एक कर के विस्तार से देखते है:
पहला तरीका
अगर आप अपने Website में सिर्फ एक ही Format का वीडियो इन्सर्ट करना चाहते है तो आप इस तरीके का इस्तेमाल कर सकते है. ये तरीका काफी ज्यादा सिंपल है. इस तरीके में सिर्फ आपको Video Tag के अंदर Video Source देना होता है.
Example: <video src="myvideo.mp4"></video>
दूसरा तरीका:
अगर आप अपने Website में एक से ज्यादा Format के वीडियो इन्सर्ट करना चाहते है तो आप इस तरीका का इस्तेमाल करते है. इस तरीके का इस्तेमाल तब तब किया जाता है जब अलग-अलग Web Browsers अलग अलग तरह के वीडियो फॉर्मेट सपोर्ट करते है.
Example: <video> <source src="video.mp4"/> <source src="video.webm"/> <source src="video.ogg"/> Your Browser Does Not Support Video Tag </video>
आप ऊपर दिए गए Example में साफ़-साफ़ देख सकते हो की <video> के अंदर Video के अलग-अलग फॉर्मेट दिए गए है. ऐसा इसलिए किया गया है क्यूंकि अगर कोई Broswer किसी तरह के वीडियो Format (.mp4, .webm, .ogg) को सपोर्ट नहीं करता है तो उसकी जगह पर कोई दूसरे फॉर्मेट का वीडियो प्ले हो जाये। लेकिन अगर हमारा Broswer ऊपर दिए गए Formats में किसी भी तरह का फॉर्मेट सपोर्ट नहीं करता है तब उसकी जगह पर “Your Bowser Does Not Support Video Tag” लिखा हुआ आ जाये।
Attributes of Video Tag
Video Tag के Attributes निचे दिए गए है:
src : इस Attribute का इस्तेमाल Webpage पर दिखाई जाने वाली वीडियो का Source बताने के लिए करते है.
EXAMPLE 1: <video src="./videos/myvideo.mp4"></video> EXAMPLE 2: <video src="https://player.vimeo.com/external/384761655.sd.mp4?s=383ab4dbc773cd0d5ece3af208d8f963368f67e4&profile_id=164&oauth2_token_id=57447761"> </video>
Controls: Webpage पर दिखाई देने वाली Video में Controls जैसे की वीडियो को Pause करना, Play करना, Skip करना जैसे functionalities ऐड करने के लिए इस Attribute का उपयोग होता है.
Autoplay: इस Attribute की मदद से जब भी आपकी Website पूरी लोड हो जायेगी तो वीडियो अपने आप प्ले जो जाएगी।
Muted: अगर हम अपने Website पर मौजूद वीडियो को Muted एट्रिब्यूट दे दे तो Video हमारे वेबसाइट पर प्ले तो होगी लेकिन उसमे से कोई आवाज नहीं आएगी।
Poster: इस एट्रिब्यूट की मदद से हम Video का कोई Thumbnail सेट कर सकते है.
Width: इस Attribute की मदद से हम अपने Website पर दिखाई देने वाली वीडियो का चौड़ाई जरूरत के अनुशार सेट कर सकते है.
Height: इस Attribute की मदद से हम अपने Website पर दिखाई देने वाली वीडियो का Height सेट कर सकते है.
Example: <video controls="" preload="" loop="" muted poster="myvideothumbnail.png" src="video.mp4"></video>