Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> HTML

HTML में वीडियो एम्बेड करना: चरण-दर-चरण मार्गदर्शिका

आप <video>, <object>, और <embed> टैग्स का उपयोग करके HTML दस्तावेज़ में वीडियो एम्बेड कर सकते हैं। प्रत्येक अलग तरीके से काम करता है, और सभी वीडियो के URL को इंगित करने के लिए src विशेषता का उपयोग करते हैं।


जब आप एक वेब पेज बना रहे होते हैं, तो आप दस्तावेज़ में एक वीडियो एम्बेड करना चाह सकते हैं। उदाहरण के लिए, आप केक बनाने का ट्यूटोरियल लिख रहे हों और रेसिपी के साथ एक वीडियो शामिल करना चाहें।

HTML दस्तावेज़ में वीडियो एम्बेड करने के कुछ तरीके हैं। इस गाइड में, हम इन HTML फंक्शन्स का उपयोग करके वीडियो एम्बेड करने के तीन तरीके कवर करेंगे: <video> का उपयोग करना, <object> का उपयोग करना, और <embed> का उपयोग करना।

वीडियो टैग

HTML5 में वेब पेजों में वीडियो एम्बेड करने के लिए एक उपयोगी एलिमेंट शामिल है: <video>। हालांकि यह एलिमेंट सभी आधुनिक वेब ब्राउज़र्स में काम नहीं करता—यह अभी भी अपेक्षाकृत नया है—लेकिन यह टैग अधिकांश ब्राउज़र्स में काम करेगा।

वीडियो एलिमेंट दो पैरामीटर्स लेता है: आपके वीडियो का स्रोत और आप जिन कंट्रोल्स का उपयोग करना चाहते हैं। यहां एम्बेड वीडियो HTML <video> टैग का सिंटैक्स है:

<video controls="controls" src="videos/ourVideo.mp4"> यह ब्राउज़र वीडियो एलिमेंट को सपोर्ट नहीं करता। </video>

उपरोक्त उदाहरण में, हम src विशेषता का उपयोग करके videos/ourVideo.mp4 पर वीडियो को रेफरेंस करते हैं। हम controls विशेषता का उपयोग करके ब्राउज़र को इसके साथ आने वाले डिफ़ॉल्ट कंट्रोल्स के सेट का उपयोग करने के लिए भी कहते हैं। हमारे <video> टैग के भीतर का टेक्स्ट तब दिखाई देगा जब वीडियो वेब पेज पर रेंडर नहीं हो सकता।

यदि हम वैकल्पिक स्रोत शामिल करना चाहते हैं, तो हम निम्न कोड का उपयोग कर सकते हैं:

<video controls="controls"> <source src="videos/ourVideo.mp4" type="video/mp4"> <source src="videos/ourSecondVideo.mp3" type="video/mp3"> यह ब्राउज़र वीडियो एलिमेंट को सपोर्ट नहीं करता। </video>

अब हमने अपने सोर्स एलिमेंट का उपयोग करके अपने वेबपेज पर एक वीडियो डाला है। ऊपर, हमने एक mp4 और एक mp3 रिसोर्स को रेफरेंस किया, लेकिन आप <video> टैग में किसी भी मानक वीडियो फॉर्मेट का उपयोग कर सकते हैं।

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद वे अपनी टेक जॉब संभावनाओं के बारे में अधिक आश्वस्त महसूस करते हैं। आज ही बूटकैंप से जुड़ें।

औसत बूटकैंप ग्रेजुएट ने करियर ट्रांजिशन में छह महीने से कम समय बिताया, बूटकैंप शुरू करने से लेकर पहली नौकरी पाने तक।

एम्बेड टैग

इसके अलावा, आप <embed> एलिमेंट का उपयोग करके वीडियो और अन्य मल्टीमीडिया को HTML वेब पेज में एम्बेड कर सकते हैं। यहां एक <embed> टैग का उदाहरण दिया गया है जिसका उपयोग वेब पेज पर Adobe Flash वीडियो को रेफरेंस करने के लिए किया जाता है:

<embed src="videos/ourVideo.swf" width="600px" height="400px">

यह कोड वेबपेज पर एक Flash वीडियो रेंडर करता है। हमने अपने वीडियो प्लेयर का आकार निर्दिष्ट करने के लिए width और height पैरामीटर्स का भी उपयोग किया। इस मामले में, हमारा वीडियो प्लेयर 600×400 के आकार में रेंडर होगा।

हालांकि, यदि आप एक Flash रिसोर्स को रेफरेंस कर रहे हैं, तो आपका वीडियो नहीं चल सकता। ऐसा इसलिए है क्योंकि यूजर्स के सिस्टम पर Flash इंस्टॉल और सक्रिय होना चाहिए, और कई यूजर्स के पास यह नहीं होता।

ऑब्जेक्ट टैग

हम <object> टैग का उपयोग करके विभिन्न प्रकार के मीडिया को HTML वेब पेज में एम्बेड कर सकते हैं। उदाहरण के लिए, आप इस टैग का उपयोग HTML5 वीडियो, ऑडियो, Flash रिसोर्स, या PDF फाइलों को अपने वेब पेज में एम्बेड करने के लिए कर सकते हैं। यहां <object> एलिमेंट का एक उदाहरण दिया गया है जिसका उपयोग वेब पेज पर वीडियो एम्बेड करने के लिए किया जाता है:

<object src="videos/ourVideo.mp4" width="600px" height="400px"></object>

फिर से, <object> टैग के काम करने के लिए यूजर्स के पास Flash इंस्टॉल और सक्रिय होना चाहिए। भले ही आप अभी भी <object> का उपयोग करना चाहते हों, उन यूजर्स के लिए <video> एलिमेंट या दोनों का उपयोग करने पर विचार करें जिनके पास Flash इंस्टॉल नहीं है।

निष्कर्ष

HTML में तीन एलिमेंट्स शामिल हैं जो आपको वेब पेज में वीडियो फाइलों को एम्बेड करने की अनुमति देते हैं: <video>, <object>, और <embed>। इसलिए, यदि आप किसी वेबपेज पर वीडियो जोड़ना चाहते हैं, तो आपको इन टैग्स का उपयोग करना चाहिए। आज हमने इन टैग्स के उपयोग और ब्राउज़र्स व Flash के साथ उनकी अनुकूलता पर चर्चा की।

अब आप किसी भी वेब पेज पर वीडियो एम्बेड करने के लिए आवश्यक ज्ञान से लैस हैं!

  1. HTML DOM Video play() मेथड HTML DOM Video play() मेथड

    HTML DOM Video play() मेथड HTML DOM Video play() का उपयोग वर्तमान मीडिया कंटेंट को चलाने के लिए किया जाता है और मीडिया को रोकने के लिए pause() का उपयोग करें। सिंटैक्स videoObject.play() उदाहरण आइए Video play() प्रॉपर्टी का एक उदाहरण देखें: <!DOCTYPE html> <html> <head> <titl

  1. HTML DOM Video paused प्रॉपर्टी HTML DOM Video paused प्रॉपर्टी

    HTML DOM Video paused प्रॉपर्टी HTML DOM Video paused प्रॉपर्टी एक बूलियन (true/false) लौटाती है जो दर्शाता है कि वीडियो चल रहा है या नहीं। सिंटैक्स बूलियन मान प्राप्त करना mediaObject.paused उदाहरण आइए HTML DOM Video paused प्रॉपर्टी का एक उदाहरण देखें: <!DOCTYPE html> <html> <h

  1. HTML DOM Video ऑब्जेक्ट HTML DOM Video ऑब्जेक्ट

    HTML DOM Video ऑब्जेक्ट HTML DOM Video ऑब्जेक्ट HTML में <video> एलिमेंट को दर्शाता है। <video> एलिमेंट बनाना var videoObject = document.createElement(VIDEO) यहां, videoObject में निम्न प्रॉपर्टीज हो सकती हैं: प्रॉपर्टी विवरण audioTracks उपलब्ध ऑडियो ट्रैक्स को दर्शाने वाला Au