फ़ोन पर दिखने वाली वेबसाइट को कैप्चर करने के तीन तरीक़े: फ़ोन को ही रिकॉर्ड कीजिए, Chrome DevTools में फ़ोन का इम्यूलेशन कीजिए, या URL से पेज को फ़ोन की चौड़ाई पर रेंडर कीजिए।
Aviral Lakhanpaul को अपडेट किया गया3 मिनट का पाठ
पेज को फ़ोन की चौड़ाई पर लोड कीजिए, ताकि साइट अपना असली मोबाइल लेआउट दिखाए, फिर उसे कैप्चर कीजिए। आप किसी असली फ़ोन की स्क्रीन रिकॉर्ड कर सकते हैं, Chrome DevTools के डिवाइस टूलबार से फ़ोन का इम्यूलेशन करके विंडो रिकॉर्ड कर सकते हैं, या URL किसी ऐसे टूल को दे सकते हैं जो पेज को फ़ोन की चौड़ाई पर पढ़कर सीधे 9:16 या 4:5 वीडियो एक्सपोर्ट करे। डेस्कटॉप रिकॉर्डिंग को कभी छोटा मत कीजिए: वह एक छोटा डेस्कटॉप पेज होगा, मोबाइल साइट नहीं।
रिस्पॉन्सिव साइट अपना लेआउट उस विंडो की चौड़ाई से तय करती है जिसमें वह खुली है। डेस्कटॉप चौड़ाई पर आपको डेस्कटॉप लेआउट ही मिलता है, बाद में वीडियो को चाहे किसी भी आकार में क्रॉप करें। मोबाइल साइट का मेन्यू बटन, एक के नीचे एक लगे कॉलम और बड़े टैप टारगेट पाने के लिए ख़ुद पेज को फ़ोन की चौड़ाई पर लोड करना होगा। नीचे दिया हर तरीक़ा यही काम अलग ढंग से करता है।
| तरीक़ा | किसके लिए अच्छा | किस बात का ध्यान रखें |
|---|---|---|
| फ़ोन की अपनी स्क्रीन रिकॉर्ड करना | असली टच इंटरैक्शन, असली डिवाइस | शॉट में स्टेटस बार और नोटिफ़िकेशन, उँगली से झटककर किया स्क्रॉल |
| Chrome DevTools का डिवाइस टूलबार | localhost पर या लॉगिन के पीछे वाले पेज | छोटी विंडो रिकॉर्ड करना, स्क्रॉल हाथ से या स्क्रिप्ट से |
| URL को फ़ोन की चौड़ाई पर रेंडर करना | सार्वजनिक पेज, साफ़ और एक जैसा स्क्रॉल | प्राइवेट पेजों तक नहीं पहुँच सकता |
iPhone और Android, दोनों की क्विक सेटिंग में बिल्ट-इन स्क्रीन रिकॉर्डर होता है। यह असली डिवाइस कैप्चर करता है, जो ईमानदार है, और स्क्रॉल भी, जो दिक़्क़त है: अँगूठा झटका देता है और फिसलता है, और हर झटका अलग दिखता है।
DevTools खोलिए, डिवाइस टूलबार चालू कीजिए (Mac पर ⇧ ⌘ M, Windows पर Ctrl Shift M) और सूची से कोई फ़ोन चुनिए। पेज उसी चौड़ाई पर, टच वाले यूज़र एजेंट के साथ दोबारा लोड होता है और अपना मोबाइल लेआउट दिखाता है। स्क्रीन रिकॉर्डर से सिर्फ़ उसी व्यूपोर्ट को रिकॉर्ड कीजिए और स्क्रॉल किसी स्क्रिप्ट से कराइए; ऑटो-स्क्रॉल गाइड में एक स्क्रिप्ट है।
रिकॉर्ड करने से पहले डिवाइस टूलबार में ज़ूम 100% कर दीजिए, वरना रिकॉर्डर छोटी की हुई कॉपी कैप्चर करता है और टेक्स्ट धुंधला हो जाता है।
होम पेज पर पता चिपकाइए और वीडियो सेटिंग में सबसे ऊपर मोबाइल, या टैबलेट, चुनिए। पेज हमारे सर्वर पर उसी चौड़ाई पर लोड होता है, इसलिए साइट वही लेआउट देती है जो वह वहाँ सच में दिखाती है, और फ़ोन के लायक़ आकार मिल जाते हैं: 9:16, 4:5 और 1:1।
रेंडर या रिकॉर्ड किया मोबाइल वीडियो सिर्फ़ स्क्रीन होता है। उसे iPhone या Pixel के अंदर दिखाने के लिए वीडियो को किसी मॉकअप ऐप में या वीडियो एडिटर के टेम्पलेट में किसी डिवाइस पर रख दीजिए। 9:16 में एक्सपोर्ट कीजिए, ताकि वह बिना पट्टियों के डिवाइस की स्क्रीन भर दे।
लिंक चिपकाइए और स्क्रॉल का प्रीव्यू मुफ़्त में देखिए। साइन अप पर 51 मुफ़्त क्रेडिट, कोई कार्ड नहीं, और आपके किसी भी एक्सपोर्ट पर वॉटरमार्क नहीं।
Chrome DevTools के डिवाइस टूलबार से पेज को फ़ोन की चौड़ाई पर लोड कीजिए, फिर उस व्यूपोर्ट को रिकॉर्ड कीजिए। या URL किसी ऐसे टूल में चिपकाइए जो पेज को फ़ोन की चौड़ाई पर पढ़कर सीधे वीडियो एक्सपोर्ट करे।
क्योंकि पेज डेस्कटॉप चौड़ाई पर लोड हुआ और फिर क्रॉप या छोटा किया गया। लेआउट विंडो की चौड़ाई से तय होता है, इसलिए मोबाइल साइट दिखाने के लिए पेज को फ़ोन की चौड़ाई पर लोड करना ज़रूरी है।
फ़ोन स्क्रीन भरने के लिए 9:16, जैसे Reels, TikTok और स्टोरीज़ में। फ़ीड पोस्ट के लिए 4:5। अगर दोनों में से कहीं भी दिख सकता है, तो 1:1।
बदली जा सकने वाली गति, समझदार नियंत्रण और आज के क्रिएटर्स के लिए बने एक्सपोर्ट विकल्पों से वेबसाइट रिकॉर्डिंग को स्वचालित कीजिए।
