आज आप सीखेंगे कि <video> . का उपयोग करके HTML में MP4 वीडियो को जल्दी से कैसे एम्बेड किया जाए तत्व। मैं निम्नलिखित को कवर करूंगा:
- अपने वीडियो प्लेयर के आकार को कैसे समायोजित करें
- अपने वीडियो को ऑटोप्ले कैसे करें
- अपने वीडियो को असीमित रूप से कैसे लूप करें
अधिकांश ट्यूटोरियल अवधारणाओं को स्पष्ट करने के लिए छोटे वीडियो के लिए GIF का उपयोग करते हैं। मैंने पाया है कि MP4 की गुणवत्ता बेहतर है, और यह कम जगह लेता है। MP4, WebM के विपरीत, सभी आधुनिक ब्राउज़रों में काम करता है, और आप उन्हें YouTube जैसी वीडियो सेवाओं पर भी अपलोड कर सकते हैं।
HTML5 वीडियो तत्व के साथ वीडियो एम्बेड करें
अपने HTML में MP4 वीडियो प्रदर्शित करने के लिए आपको HTML5 <video> . का उपयोग करना होगा तत्व। सबसे सरल कार्यान्वयन इस तरह दिखता है:
<video width="500" controls>
<source src="path-to-your-video.mp4" type="video/mp4" />
</video>
आप controls को हटा सकते हैं विशेषता, लेकिन मैं इसकी अनुशंसा नहीं करता, क्योंकि यह आपके उपयोगकर्ताओं को आपके वीडियो को रोकने/चलाने/रिवाइंड करने की अनुमति देता है।
500 मान पिक्सेल इकाइयों (500px) में मापा जाता है।
बस "path-to-your-video.mp4" . को बदलें एक वास्तविक MP4 स्रोत के साथ, आप इसे परीक्षण के लिए उपयोग कर सकते हैं (मेरे एक ट्यूटोरियल से)
https://res.cloudinary.com/techstacker/video/upload/f_auto/v1548698438/TechStacker/mac-drag-app-icon-to-dock.mp4अपने वीडियो प्लेयर का आकार (चौड़ाई/ऊंचाई) समायोजित करें
आपके वीडियो की वर्तमान में 500 पिक्सेल की चौड़ाई है, आप इसे अपनी इच्छानुसार किसी भी मान में बदल सकते हैं। यदि आप चाहते हैं कि यह सापेक्ष स्थान का 100% भाग ले (कंटेनर आपके वीडियो तत्व के अंदर बैठता है) तो आप इसे बस width="100%" में बदल सकते हैं ।
आप height . का उपयोग करके भी ऊंचाई समायोजित कर सकते हैं . यहां उपयोग में दोनों का एक उदाहरण दिया गया है:
<video width="100%" height="400" controls>
<source src="path-to-your-video.mp4" type="video/mp4" />
</video>अपना वीडियो अपने आप चलाएं (एक बार)
अपने MP4 वीडियो को एक बार ऑटोप्ले करने के लिए जब आपके उपयोगकर्ता पहली बार आपका वीडियो अपनी स्क्रीन पर देखते हैं, तो autoplay जोड़ें वीडियो तत्व पर संपत्ति:
<video width="500" controls autoplay>
<source src="path-to-your-video.mp4" type="video/mp4" />
</video>ऑटोप्ले कैसे काम करता है
जैसे ही आपके उपयोगकर्ताओं के पास उनकी स्क्रीन के व्यूपोर्ट में वीडियो होगा, ऑटोप्ले फ़ंक्शन स्वचालित रूप से ट्रिगर हो जाएगा।
अपना वीडियो लूप करें
अपने MP4 वीडियो को HTML5 में लूप (अनंत रूप से चलाने) के लिए, loop . का उपयोग करें विशेषता:
<video width="500" controls autoplay loop>
<source src="path-to-your-video.mp4" type="video/mp4" />
</video>
नोट: controls विशेषता आपके उपयोग को वीडियो को रोकने/बंद करने की अनुमति देती है, लेकिन ध्यान रखें कि लूपिंग वीडियो कष्टप्रद हो सकते हैं, विशेष रूप से ध्वनि के साथ। लूप विशेषता का उपयोग केवल तभी करें जब यह विशिष्ट उपयोग के मामलों में समझ में आता है।
ब्राउज़र समर्थन
पुराने डायनासोर ब्राउज़र के दिन लगभग खत्म हो गए हैं। लेकिन उन ब्राउज़रों के लिए जो वीडियो तत्व का समर्थन नहीं करते हैं, आप <video> के बीच कुछ पाठ जोड़ सकते हैं अपने उपयोगकर्ताओं को यह बताने के लिए टैग:
<video width="500" controls autoplay>
<source src="path-to-your-video.mp4" type="video/mp4" />
Your browser is outdated, update it to display the video
</video>टेक्स्ट केवल पुराने पुराने ब्राउज़र (इंटरनेट एक्सप्लोरर 9 के नीचे) में दिखाया जाएगा।
MP4 फ़ॉलबैक के साथ WebM का उपयोग करना
यदि आपके पास अपने वीडियो का WebM और MP4 दोनों संस्करण हैं, तो आप MP4 को फ़ॉलबैक के रूप में उपयोग करने के लिए निम्न कोड का उपयोग कर सकते हैं, यदि आपका उपयोगकर्ता ब्राउज़र WebM का समर्थन नहीं करता है:
<video width="500" controls>
<source src="path-to-your-video.webm" type="video/webm" />
<source src="path-to-your-video.mp4" type="video/mp4" />
</video>नोट:फिलहाल, केवल क्रोम और ओपेरा ही वेबएम का पूर्ण समर्थन करते हैं, लेकिन फायरफॉक्स और एज भी इसे लागू करने पर काम कर रहे हैं।
बोनस युक्ति
MP4 वीडियो को शीघ्रता से रिकॉर्ड करने के लिए आप इन निःशुल्क टूल का उपयोग कर सकते हैं:
- द कैप ऐप (मैक)
- आइसक्रीम स्क्रीन रिकॉर्ड (विंडोज़)
आपके वीडियो को मुफ्त में अपलोड और स्टोर करने के लिए मैं क्लाउडिनरी की सलाह देता हूं।