आज आप HTML में <video> एलिमेंट का उपयोग करके MP4 वीडियो को जल्दी से एम्बेड करना सीखेंगे। मैं निम्नलिखित को कवर करूँगा:
- अपने वीडियो प्लेयर का आकार कैसे समायोजित करें
- अपने वीडियो को ऑटोप्ले कैसे करें
- अपने वीडियो को अनंत लूप कैसे करें
अधिकांश ट्यूटोरियल्स छोटे वीडियो के लिए अवधारणाओं को स्पष्ट करने के लिए GIFs का उपयोग करते हैं। मैंने पाया है कि MP4 की गुणवत्ता बेहतर होती है, और कम जगह लेते हैं। MP4, WebM के विपरीत, सभी आधुनिक ब्राउज़र्स में काम करता है, और आप उन्हें YouTube जैसी वीडियो सेवाओं पर भी अपलोड कर सकते हैं।
HTML5 वीडियो एलिमेंट से वीडियो एम्बेड करें
अपने HTML में MP4 वीडियो प्रदर्शित करने के लिए आपको HTML5 <video> एलिमेंट का उपयोग करना होगा। सबसे सरल कार्यान्वयन इस तरह दिखता है:
<video width="500" controls> <source src="पथ-से-आपका-वीडियो.mp4" type="video/mp4" /> </video>आप controls एट्रिब्यूट को हटा सकते हैं, लेकिन मैं इसकी अनुशंसा नहीं करता, क्योंकि यही आपके यूजर्स को आपके वीडियो को पॉज/प्ले/रिवाइंड करने की अनुमति देता है।
500 मान पिक्सेल यूनिट्स में मापा जाता है (500px)।
बस "पथ-से-आपका-वीडियो.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="पथ-से-आपका-वीडियो.mp4" type="video/mp4" /> </video>अपने वीडियो को ऑटोप्ले करें (एक बार)
अपने MP4 वीडियो को एक बार ऑटोप्ले करने के लिए जब आपके यूजर्स पहली बार अपनी स्क्रीन पर आपका वीडियो देखते हैं, तो वीडियो एलिमेंट पर autoplay प्रॉपर्टी जोड़ें:
<video width="500" controls autoplay> <source src="पथ-से-आपका-वीडियो.mp4" type="video/mp4" /> </video>ऑटोप्ले कैसे काम करता है
ऑटोप्ले फ़ंक्शन स्वचालित रूप से ट्रिगर होगा जैसे ही आपके यूजर्स के पास उनकी स्क्रीन के व्यूपोर्ट के अंदर वीडियो होगा।
अपने वीडियो को लूप करें
HTML5 में अपने MP4 वीडियो को लूप (अनंत रूप से चलाने) के लिए, loop एट्रिब्यूट का उपयोग करें:
<video width="500" controls autoplay loop> <source src="पथ-से-आपका-वीडियो.mp4" type="video/mp4" /> </video>नोट: controls एट्रिब्यूट आपके यूजर को वीडियो को पॉज/स्टॉप करने की अनुमति देता है, लेकिन ध्यान रखें कि लूपिंग वीडियो कष्टप्रद हो सकते हैं, विशेष रूप से ध्वनि के साथ। लूप एट्रिब्यूट का उपयोग केवल तभी करें जब यह विशिष्ट उपयोग के मामलों में समझ में आए।
ब्राउज़र सपोर्ट
पुराने डायनासोर ब्राउज़र्स के दिन लगभग खत्म हो चुके हैं। लेकिन उन ब्राउज़र्स के लिए जो वीडियो एलिमेंट का समर्थन नहीं करते, आप <video> टैग्स के बीच कुछ टेक्स्ट जोड़ सकते हैं ताकि आपके यूजर्स को पता चले:
<video width="500" controls autoplay> <source src="पथ-से-आपका-वीडियो.mp4" type="video/mp4" /> आपका ब्राउज़र पुराना है, वीडियो प्रदर्शित करने के लिए इसे अपडेट करें </video>टेक्स्ट केवल पुराने आउटडेटेड ब्राउज़र्स (इंटरनेट एक्सप्लोरर 9 से नीचे) में दिखाया जाएगा।
MP4 फॉलबैक के साथ WebM का उपयोग
यदि आपके पास अपने वीडियो का WebM और MP4 दोनों संस्करण है, तो आप MP4 को फॉलबैक के रूप में उपयोग करने के लिए निम्नलिखित कोड का उपयोग कर सकते हैं, यदि आपके यूजर का ब्राउज़र WebM का समर्थन नहीं करता:
<video width="500" controls> <source src="पथ-से-आपका-वीडियो.webm" type="video/webm" /> <source src="पथ-से-आपका-वीडियो.mp4" type="video/mp4" /> </video>नोट: अभी तक, केवल क्रोम और ओपेरा पूरी तरह से WebM का समर्थन करते हैं, लेकिन फ़ायरफ़ॉक्स और एज इसे लागू करने पर भी काम कर रहे हैं।
बोनस टिप
MP4 वीडियो जल्दी रिकॉर्ड करने के लिए आप इन मुफ्त टूल्स का उपयोग कर सकते हैं:
- द कैप ऐप (मैक)
- आइसक्रीम स्क्रीन रिकॉर्ड (विंडोज)
अपने वीडियो को मुफ्त में अपलोड और स्टोर करने के लिए मैं Cloudinary की सिफारिश करता हूँ।
