كيف صنعت فيديو إعلانيًا لتطبيق بالكود باستخدام Remotion

هل يمكن صناعة فيديو إعلاني لتطبيق بالكود؟

نعم. Remotion إطار عمل مبني على React يحوّل المكوّنات إلى فيديو MP4 إطارًا بإطار. الفيديو أعلاه لا يحتوي على أي خط زمني في برنامج مونتاج: كل مشهد وحركة كاميرا وانتقال وترجمة مكتوب بـ TypeScript، وأمر واحد يُخرج الملف.

صنعته للإصدار 1.2.0 من تطبيق Tech 92 للحضور ومؤشرات الأداء في Technology 92، وهو تطبيق أبنيه وأتابع تطويره. أردت ثلاثة أشياء يصعب تحقيقها في برامج المونتاج: واجهة التطبيق الحقيقية بدل التصاميم التخيلية، وتحكمًا كاملًا في النص العربي من اليمين إلى اليسار، وطريقة عمل أعيد استخدامها مع كل إصدار.

الأدوات المستخدمة في الفيديو

لكل خطوة أداة واحدة، وكلها في مساحة عمل واحدة بمجلد مستقل لكل فيديو. يوضح الشكل أدناه المسار من أول تسجيل للشاشة حتى الملفات الأربعة النهائية.

كيف تسجّل شاشات التطبيق الحقيقية دون بيانات حقيقية؟

الفيديو الإعلاني منشور للجميع، لذلك لا يمكن أن يظهر فيه موظفون أو ساعات عمل أو حسابات حقيقية. بنيت تطبيق Flutter بخيار تجريبي يضيف طبقة اعتراض أمام عميل الـ API، فيرد على كل طلب من الجهاز نفسه ببيانات وهمية لموظفة اسمها سارة أحمد. لا يصل أي طلب إلى الخادم، ومع ذلك يعمل تسجيل الدخول وتسجيل الحضور والاختبارات بالكامل.

يعمل التطبيق التجريبي على محاكٍ منفصل، فيبقى المحاكي الذي عليه حسابي الحقيقي كما هو. أسجّل لقطة طويلة واحدة لكل مسار، ثم أستخدم كشف المشاهد في ffmpeg لاستخراج رقم الإطار لكل لمسة وانتقال، وتصبح هذه الأرقام نقاط القطع داخل الكود.

كيف تحرّك الواجهة الحقيقية بدل لقطات الشاشة الثابتة؟

استخدمت النسخة الأولى من الفيديو لقطات شاشة ثابتة مع تلاشٍ بسيط، وكانت النتيجة باهتة. أما النسخة الحالية فتعرض التسجيلات الحقيقية داخل شاشة عائمة تقترب منها الكاميرا، ثم تُخرج منها مكوّنات حقيقية: بطاقة اليوم أو رسم مؤشر الأداء يُقصّ من الإطار ويخرج كطبقة مستقلة بعمق وإطار مضيء.

تنتقل المشاهد على إيقاع موسيقى بسرعة 120 نبضة في الدقيقة، وكل انتقال حركة سريعة في اتجاه معاكس للسابق. وللعربية قواعدها الخاصة: العناوين تبدأ من اليمين، والمسافة بين الحروف صفر حتى لا ينقطع اتصالها، وارتفاع السطر 1.4 حتى لا تُقص الهمزة والشدة عند ظهور النص.

كيف تحصل على تعليق صوتي بالذكاء الاصطناعي لا يبدو متقطعًا؟

كان التعليق الصوتي الأول أحد عشر مقطعًا منفصلًا من تحويل النص إلى كلام، مقطعًا لكل مشهد. كل مقطع يبدأ بنبرة جديدة، والموسيقى ترتفع وتنخفض بين المقاطع، فبدا الصوت متقطعًا في المنتصف. الحل كان تسجيلًا واحدًا متصلًا للنص كله.

ولّدت هذا التسجيل بصوت Abdulrahman على نموذج Multilingual v2 من ElevenLabs. بعد ذلك يتكيّف الفيديو مع الصوت: يبدأ كل مشهد على النبضة السابقة لجملته مباشرة، وتنخفض الموسيقى إلى 30% مرة واحدة طوال التسجيل بدل أن ترتفع وتنخفض بين الجمل.

كيف تُزامن الترجمة مع الصوت كلمةً بكلمة؟

يعرض LinkedIn الفيديوهات دون صوت، لذلك تحمل الترجمة الرسالة كاملة. يعمل نموذج Whisper محليًا (faster-whisper بحجم medium) ليحوّل التسجيل إلى نص مع توقيت لكل كلمة، ثم يطابق سكربت صغير هذه الكلمات مع النص بالترتيب: طابقت 112 كلمة من أصل 121 مباشرة، وأخذت الكلمات الباقية توقيتًا موزعًا حسب طولها بين الكلمات المطابقة حولها.

تعرض الترجمة عبارة من خمس كلمات على الأكثر، وتتلوّن بالذهبي الكلمة المنطوقة فقط. وتظهر الأرقام المنطوقة كأرقام، فتُقرأ «واحد فاصل اثنان» على أنها 1.2. وتبقى الواجهة الحية في كل مشهد فوق منطقة الترجمة، فلا يغطي النص أي لمسة أو رسم بياني.

كود واحد لكل المقاسات

لأن الفيديو كود، فالمقاس الجديد تركيبة جديدة تعيد استخدام المشاهد نفسها. نسخة LinkedIn تضع الفيديو العمودي على مساحة 4:5 وتعيد رسم الترجمة بحجمها الكامل. أما بطاقة حدث App Store فتصميم أفقي جديد مدته 20 ثانية بالموسيقى فقط، لأن المتجر يشغّلها دون صوت ويكتب اسم الحدث فوقها.

رفض App Store Connect ملف الـ 68 ثانية لصفحة تفاصيل الحدث برسالة واحدة: «Your file is in the wrong format». الحل كان نسخة مدتها 29.5 ثانية بألوان بالمدى القياسي (yuv420p)، لأن Remotion يُخرج افتراضيًا بالمدى الكامل، وقد يرفضه المتجر.

ما الذي تعطّل حتى تتجنبه

بدأ الصوت المجاني من Microsoft الذي تستخدمه أداة edge-tts يرد بالخطأ 403 على كل طلب، ويرفض الـ API المجاني من ElevenLabs أصوات مكتبة الأصوات بالخطأ 402. وتجاوزت المشكلتين بتوليد التسجيل من موقع ElevenLabs نفسه، ثم توقيته محليًا عبر Whisper.

على المحاكي، كانت اللمسات المبرمجة تصل أحيانًا متأخرة بخطوة، وأداة التسجيل لا تكتب شيئًا قبل إيقافها. حلّ مشكلةَ اللمسات مسارُ لمس صريح للضغط والرفع. ولأن الإطار الأول هو صورة المعاينة، وشاشة البداية تبدأ سوداء، أصبح الفيديو يبدأ من منتصف الحركة ويثبت على الشعار المكتمل.

متى تصنع الفيديو الإعلاني بالكود؟

يستحق الكود الجهد عندما يتكرر الفيديو: فيديو لكل إصدار، بأكثر من مقاس وأكثر من لغة، مع واجهة حقيقية تتغير كل مرة. في الإصدار القادم من Tech 92 سأستبدل التسجيلات والنص ثم أُخرج الفيديو من جديد. أما الإعلان الذي يُصنع مرة واحدة بتصوير حقيقي، فبرنامج المونتاج ما زال أسرع.