html5 video tag | HTML Video tag in hindi
आज के इस HTML video tag in Hindi के लेख में हम HTML5 video tag का उपयोग कर के web page पर video embed करना सीखेंगे |
HTML me video embed kaise kare ( Embed video in html )
HTML document में text content की तरह video content भी अहम् भूमिका निभाता है |
कई बार text content के कुछ भाग ऐसे होते है जिन्हे video के माध्यम से explain कर के समझना बहुत आसान होता है | यह user के लिए बहुत सहायक होता है , जिससे web page पर user का experiance अच्छा बनता है |
आइये HTML में video को embed करने के कुछ तरीके को समझते है |
HTML5 video Element in Hindi
Video element HTML5 में newly introduced किया गया element है | यह new element होने के बावजूत सभी web browser को अच्छे से support करता है |
आइये पहले हम video tag के attributes को समझते है , ताकि इसके examples समझने में आपको आसानी हो |
Video tag attributes in hindi
निम्नलिखित तालिका में सामान्यतौर पर उपयोग मे लिए जाने वाले video tag के attributes दर्शाये गए है |
| Controls | controls | इससे video controls को display करवाया जाता है , जैसे की play और pause button. |
| autoplay | autoplay | इससे video file ready होने के साथ autoplay करवाया जाता है | |
| loop | loop | इसके जरिये video हर बार समाप्त होने पर फिर से शुरू करवाया जाता है | |
| muted | muted | इसके जरिये video का audio output को default रूप से mute करवाया जाता है | |
| poster | URL | इसके जरिये video web page पर load होने के दौरान image को thumbnail की तरह display करवाया जाता है | |
| height | pixels | Video की height set करने के लिए इसका उपयोग किया जाता है | |
| width | pixels | Video की width set करने के लिए इसका उपयोग किया जाता है | |
| preload | auto metadata none | Web page load होने पर video किस तरह load होना चाहिए यह control कर सकते है | |
| src | URL | Video file का URL निर्दिष्ट किया जाता है | |
URL के बारे में अधिक जानकारी के लिए what is url in hindi और What is URL Encoding in Hindi के लिख बढ़ सकते है |
video Element Example
<video controls="controls" width="150" height="270" src="http://techsamundra.com/wp-content/uploads/2022/09/Free-me-computer-se-virus-kaise-remove-kare.mp4">
Thise browser not supporting video element
</video>निचे दिया गया example में alternative source tag का उपयोग कर के video embed किया गया है |
<video controls="controls" poster="http://techsamundra.com/wp-content/uploads/2022/08/Tech-Samundra-Logo.jpg" preload="auto" width="150" height="270" muted loop autoplay>
<source src="http://techsamundra.com/wp-content/uploads/2022/09/Free-me-computer-se-virus-kaise-remove-kare.mp4" type="video/mp4">
</video>ऊपर के उदहारण में video tag में लगभग सभी common attributes का उपयोग किया गया है , आप हमारे HTML code editor में इस code को paste करे और एक-एक कर के सभी attributes के output को check करे |
Embed video using object element
HTML दस्तावेज़ में विभिन्न प्रकार की media files को embed करने के लिए <object> element का उपयोग कर सकते है |
<object data="http://techsamundra.com/wp-content/uploads/2022/09/Free-me-computer-se-virus-kaise-remove-kare.mp4" width="150px" height="270px"></object>Note :- object element ज्यादातर browser में support नहीं करता है , इसलिए video file को embed करने के लिए इसका उपयोग नहीं करना चाहिए |
Embed video using embed Element
Multimedia content को HTML document में embed करवाने के लिए embed element का उपयोग किया जाता है |
निचे दिया गया example देखे |
<embed src="http://techsamundra.com/wp-content/uploads/2022/09/Free-me-computer-se-virus-kaise-remove-kare.mp4" width="150px" height="270px">Note :- embed element लगभग सभी browser को support करता है , लेकिन flash और अन्य जरूरी plugin की अनुपलब्धता के कारण हो सकता है video web page पर ना चले |
Embed youtube video in html
Youtube को HTML document में embed करने के लिए ज्यादातर iframe element का उपयोग किया जाता है | <iframe> tag के बारे मे अधिक समझने के लिए What is iframe in HTML का लेख पढ़े |
Youtube video को embed करने के लिए iframe सबसे अच्छा तरीका है |
Youtbue per channel kaise banate hai और Youtube par videos kaise upload karte hai करते है इसके लिए आप YouTube par videos banakar paise kaise kamaye ? यह लेख पढ़ सकते है |
<iframe width="560" height="315" src="https://www.youtube.com/embed/qBgKb9WbSpg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>यह भी पढ़े :-