HTML से वीडियो
वेब एनिमेशन, Canvas और Three.js कोड को MP4 में बदलें
किसी टेम्पलेट से शुरू करें
- लाइव व्याख्या विंडो गोल कोनों वाली वक्ता विंडो, LIVE बैज और नाम-पट्टी; वीडियो की आवाज़ भी टाइमलाइन पर
- फ़्रेम वाली मीडिया सफ़ेद किनारे और चमक वाली विंडो, कोने में लेबल; ज़ूम होकर आती है और किसी हिस्से पर ज़ूम कर सकती है
- फ़ोटो वॉल खड़ी फ़ोटो बगल-बगल में एक-एक कर आती हैं, हर एक पर कैप्शन
- त्रिपटिक क्लोज़-अप चित्र किनारे से किनारे तक साथ-साथ, हर एक पर लेबल, नीचे अध्याय संख्या और शीर्षक
- गैलरी स्ट्रिप नीचे के थंबनेल बारी-बारी चमकते हैं, बड़ी छवि बदलती है
- स्टोरीबोर्ड + मुख्य बाईं ओर स्टोरीबोर्ड की कतार, दाईं ओर लेबल वाली मुख्य विंडो
- स्प्लिट व्याख्या बाईं ओर बड़ा टेक्स्ट (दूसरी पंक्ति अलग रंग में), दाईं ओर मीडिया, नीचे टाइमलाइन चिह्न
- मीडिया भरा शीर्षक विशाल अक्षरों के भीतर आपका वीडियो या छवि, ऊपर छोटा शीर्षक और नीचे उपशीर्षक
- फ़ोन मॉकअप फ़ोन के फ़्रेम में आपका फ़ुटेज, हल्का तैरता हुआ
- कोने का बैज आपका लोगो और नाम कोने में बना रहता है
- दानेदार ग्रेडिएंट टील से नारंगी तक धीमा ग्रेडिएंट और फ़िल्म ग्रेन — सबसे नीचे बैकग्राउंड के रूप में
- टाइटल पॉप बड़ा शीर्षक, अंडरलाइन और उपशीर्षक के साथ
- शब्द-दर-शब्द शब्द ताल पर एक-एक करके आते हैं
- डेटा ग्रोथ बार बढ़ते हैं और संख्या गिनती करती है
- लोअर थर्ड नाम और भूमिका का बैनर
- लाइट स्वीप रोशनी की एक लकीर फ्रेम पर से गुज़रती है
- काउंटडाउन 3, 2, 1 उभरते हैं और रिंग घटती जाती है
- टाइपराइटर अक्षर-दर-अक्षर टाइप होता है, कर्सर टिमटिमाता है
- प्रोग्रेस रिंग रिंग आपके प्रतिशत तक भरती है और संख्या बढ़ती है
- गोला लगाकर दिखाएँ हाथ से बना गोला ज़रूरी चीज़ को घेरता है
- घूमती 3D आकृति धातु जैसी गाँठ धीरे-धीरे घूमती है (Three.js)
- संगीत बार बार टाइमलाइन के संगीत पर उछलते हैं और बीट पर चमकते हैं
- कैप्शन कार्ड उसी समय के कैप्शन एक-एक कार्ड में, रंगीन पट्टी के साथ; कैप्शन ट्रैक छिपाएँ तो केवल कार्ड रहेंगे
- हाइलाइट शीर्षक क्रीम कार्ड पर चमकीली हाइलाइटर पट्टी, बड़े अक्षर एक-एक कर गिरते हैं
- काइनेटिक शब्द हर स्क्रीन पर एक शब्द ज़ोर से आता है, काले/पीले/क्रीम ब्लॉक तिरछे बदलते हैं
- प्रश्न कार्ड छोटा टैग और दो बड़ी पंक्तियाँ, दूसरी चमकीली पट्टी पर
- स्टिकर टैग क्रीम रंग की कागज़ी पट्टियाँ तिरछी होकर आती हैं (| से अलग करें)
- ब्लॉक काउंटडाउन बड़े अंक घटते हैं, हर अंक नया रंगीन ब्लॉक लाता है
- कैप्सूल टैग बड़ा शीर्षक, गहरे कैप्सूल टैग की पंक्ति एक-एक कर उभरती है, नीचे हाइलाइट किया निष्कर्ष
- स्थिति कार्ड बाईं ओर कार्डों का कॉलम बारी-बारी से बीच में फ़ोकस होता है, दाईं ओर बड़े अक्षरों में तुलना
- टैग तालिका गहरे पैनल में पंक्ति-दर-पंक्ति “टैग → अर्थ”, बाएँ कॉलम में मोनोस्पेस फ़ॉन्ट
- उद्धरण कार्ड ऊपर बाईं ओर छोटा लेबल और बीच में लंबा उद्धरण जो पंक्ति-दर-पंक्ति उभरता है
एक क्लिक में एडिटर खुलता है और मोशन पहले से जुड़ा होता है। मीडिया स्लॉट वाले टेम्पलेट में कार्ड पर वीडियो या इमेज खींचें, या "मेरी फ़ाइलें इस्तेमाल करें" पर टैप करें, और एडिटर खुलते ही वह अपनी जगह पर होगी। फ़ाइलें आपके डिवाइस पर रहती हैं; कुछ अपलोड नहीं होता।
Canvas, SVG, GSAP या Three.js वाला वेब एनिमेशन पेस्ट करें; वह फ़्रेम-दर-फ़्रेम बनकर वीडियो के ऊपर MP4 या GIF में एक्सपोर्ट होगा। मुफ़्त, बिना वॉटरमार्क।
वेब एनिमेशन का कोड पेस्ट करें या कोई .html फ़ाइल इम्पोर्ट करें, और वह टाइमलाइन पर एक मोशन क्लिप बन जाता है: पारदर्शी बैकग्राउंड, आपके वीडियो या इमेज के ऊपर, और बाकी क्लिप की तरह उसे खिसका सकते हैं, छोटा-बड़ा कर सकते हैं, ओपैसिटी बदल सकते हैं, कीफ़्रेम और इन/आउट एनिमेशन जोड़ सकते हैं।
एडिटर स्क्रीन रिकॉर्ड नहीं करता, बल्कि समय के हिसाब से फ़्रेम-दर-फ़्रेम बनाता है: एक ही पल हमेशा एक ही फ़्रेम देता है, इसलिए प्रीव्यू में जो दिखता है वही एक्सपोर्ट होता है। कोड के Math.random, Date और requestAnimationFrame एक तय घड़ी पर चलते हैं; GSAP और Three.js पहले से शामिल हैं, बाहरी स्क्रिप्ट जोड़ने की ज़रूरत नहीं।
कोड एक अलग सैंडबॉक्स में चलता है जहाँ इंटरनेट नहीं है, इसलिए बाहरी इमेज और फ़ॉन्ट लोड नहीं होते; ज़रूरत हो तो उन्हें data: पते के रूप में अंदर ही डालें। रचना खुद जो पैरामीटर बताती है (टेक्स्ट, रंग, संख्याएँ) वे दाईं ओर सेटिंग पैनल में दिखते हैं; बदलकर सीधे MP4 या GIF एक्सपोर्ट करें।
सामान्य प्रश्न
- कौन-से तरीक़े सपोर्ट होते हैं?
- चार आम तरीक़े सीधे चलते हैं: window.__seek(t) परिभाषित करें जो हर सेकंड-मान पर एक फ़्रेम बनाए; GSAP की रुकी हुई टाइमलाइन बनाकर window.__timelines में रखें; __seek के अंदर समय के हिसाब से Three.js सीन सजाकर रेंडर करें; या साधारण requestAnimationFrame लूप। अगर पेज पर सिर्फ़ एक canvas है तो सीधे वही लिया जाता है, वरना पूरा पेज (SVG, CSS, टेक्स्ट) एक फ़्रेम के रूप में बनता है।
- क्या CDN वाली लाइब्रेरी इस्तेमाल कर सकते हैं?
- GSAP (CustomEase, MotionPath, MorphSVG, DrawSVG और SplitText प्लगइन के साथ) और Three.js पहले से शामिल हैं, और कोड में इनके CDN पते अपने-आप अंदर वाली कॉपी से बदल जाते हैं। बाकी बाहरी लाइब्रेरी लोड नहीं होतीं, क्योंकि सैंडबॉक्स में इंटरनेट नहीं है।
- क्या एक्सपोर्ट किए गए वीडियो में आवाज़ होती है?
- मोशन क्लिप की अपनी कोई आवाज़ नहीं होती, और कोड जो ऑडियो चलाता है वह रिकॉर्ड नहीं होता। टाइमलाइन पर अलग से म्यूज़िक या वॉइसओवर जोड़ें और मोशन के साथ एक्सपोर्ट करें।
- कोड में एरर आए तो क्या करें?
- प्रीव्यू के ऊपर और क्लिप पर एरर की सूचना दिखती है, और असली एरर संदेश कोड डायलॉग में दिखता है। “AI से ठीक कराएँ” पर क्लिक करें: AI आपका कोड पढ़कर ठीक करेगा और नतीजा जाँचेगा। तब तक प्रीव्यू आख़िरी सही फ़्रेम पर रुका रहता है और बाकी क्लिप पर असर नहीं पड़ता।
- क्या मेरा कोड अपलोड होता है?
- नहीं। कोड प्रोजेक्ट के साथ आपके ब्राउज़र में सेव रहता है और आपके डिवाइस पर ही रेंडर और एक्सपोर्ट होता है। वह सिर्फ़ तब अपलोड होता है जब आप खुद प्रोजेक्ट को क्लाउड में सेव करें।