في Adstacker، يتكون إعلان الفيديو من مجموعة من المقاطع، توقيت الترجمة، طبقات النصوص، الأنماط، الرسوم المتحركة، نسب العرض إلى الارتفاع، والدعوات إلى العمل. يحتاج المبدعون إلى رؤية هذه الخيارات فوراً - ويجب أن يتطابق التصدير النهائي معها.
لهذا السبب نستخدم Remotion. تركيبته القائمة على React تدعم المعاينات القابلة للتحرير وتوفر نفس القواعد البصرية للفيديو المقدم. نحن نحدد الإبداع مرة واحدة ونحافظ على تطابق التجربتين.
التحدي: المعاينة والتصدير غالباً ما يبتعدان عن بعضهما
تواجه الأدوات الإبداعية مشكلة محبطة شائعة: تبدو معاينة المحرر صحيحة، لكن الملف المصدر لا. قد يتحرك موضع النص، قد يلتف الخط بشكل مختلف، قد تظهر الترجمة في اللحظة الخطأ، أو قد يتم تشغيل تسلسل المقاطع بشكل مختلف بعد التصدير.
تزداد المشكلة عندما يخلط المستخدمون بين المقاطع، يختارون أنماط الترجمة، يضيفون نصوص الخطاف/الجسم/الدعوة إلى العمل، ويغيرون نسبة العرض إلى الارتفاع. إذا قامت كل واجهة بتفسير هذه الإعدادات بشكل مستقل، تتراكم الفروقات الصغيرة.
تحتاج Adstacker إلى معاينات فورية وتقديم قابل للتوسع. يجب أن يكون التركيب مرناً للتحرير ويمكن التنبؤ به في الإنتاج.
تركيب مشترك واحد للمعاينة والتقديم
الركيزة الأساسية لدينا هي Remotion VideoTemplate مشترك. يقبل:
- فيديو واحد أو تسلسل من مقاطع الفيديو
- المدة الإجمالية ومعدل الإطارات
- حجم اللوحة المستهدفة لنسبة العرض إلى الارتفاع المحددة
- طبقات النصوص، الدعوة إلى العمل، والترجمة المؤقتة
- إعدادات الأنماط والرسوم المتحركة لكل طبقة
تقوم Remotion’s Series بربط المقاطع في خط زمني واحد. Sequence تضع طبقات النصوص والترجمة في إطارات محددة. لذا فإن التغيير هو بيانات، وليس ملفاً محرراً لمرة واحدة.
البنية
يشترك المسار الأمامي ومسار التقديم في القالب، الخطوط، خريطة أنماط الترجمة، وأنواع الطبقات. يعني النمط نفس الشيء في المتصفح وفي الإعلان النهائي.
معاينات حية باستخدام Remotion Player
يوفر Remotion Player لوحة المعاينة التفاعلية. عندما يغير المبدع خطافاً، جسماً، دعوة إلى العمل، نمط الترجمة، أو نسبة العرض إلى الارتفاع، نقوم بتمرير الخصائص المحدثة إلى القالب بدلاً من بناء ملف جديد.
تستخدم المعاينة التركيبة الحقيقية، وليس تقريباً ثابتاً. تعرض المقاطع المتسلسلة، الترجمات المؤقتة، النصوص المتحركة، وأبعاد اللوحة المختارة معاً، مع أدوات التحكم في التشغيل المألوفة.
لتحرير النصوص، تخفي المعاينة مؤقتاً طبقة التركيبة النشطة بينما يتولى محرر على اللوحة التعامل مع التفاعل. ثم يتدفق الموضع المخزن مرة أخرى إلى تلك الطبقة في Remotion - دون إنشاء نموذج بصري منفصل.
طبقات ديناميكية، مؤقتة للإطارات
يوفر لنا Remotion خطاً زمنياً قائماً على الإطارات، لذا فإن كل طبقة لها إطار بدء ومدة بدلاً من تخمين بصري غير دقيق.
يتم تجميع كلمات الترجمة المؤقتة في قطع قصيرة وتحويلها إلى إطارات قبل الوصول إلى التركيبة. كل خطاف، جسم، أو دعوة إلى العمل له أيضاً نافذة زمنية محددة، نمط، رسوم متحركة، وموضع. يقوم القالب بتقديم الطبقة فقط للإطار الحالي.
هذا يجعل التغيير الجديد تغييراً في البيانات: تقدم Adstacker مواصفات طبقة مختلفة لنفس المكون - النوع من النهج القابل للتكوين، المدفوع بالقالب الذي تطبقه فرق هندسة تكنولوجيا الفيديو لدينا عبر خطوط أنابيب الوسائط للعملاء.
التصميم لإخراج موثوق به
لا يقوم متصفح المعاينة وعامل التقديم بفك تشفير الفيديو بنفس الطريقة تماماً. يتحقق قالبنا مما إذا كان في وضع التقديم: في المتصفح، يستخدم مكون Remotion’s Video حتى يتمكن Player من تشغيل الصوت المصدر؛ عند التقديم، يستخدم OffthreadVideo، الذي يناسب بشكل أفضل لاستخراج الإطارات من جانب الخادم بشكل موثوق.
نحن أيضاً نشارك الخطوط وخرائط الأنماط بين السياقين. هذا يحافظ على التفاف الترجمة، حجم النص، وسلوك الرسوم المتحركة متسقاً. يمنع قماش نسبة العرض إلى الارتفاع والتراكبات المقيدة الطبقات من الاختفاء خارج الحافة.
مثال واقعي: اختبار خطاف ناجح دون إعادة بناء كل إعلان
تخيل علامة تجارية مع عرض منتج واحد ودعوتين إلى العمل تختبر ثلاث خطافات افتتاحية ونمطين للترجمة. يمكن للمبدع معاينة التركيبة، بما في ذلك تسلسلها، الترجمة، والنصوص المتحركة، في النسبة النهائية.
إذا قام الفريق بتغيير نص الخطاف أو نقل الدعوة إلى العمل، فإنه يقوم بتحديث بيانات الطبقة. لا يوجد تصميم معاينة منفصل لإعادة الإنشاء؛ يستخدم خط أنابيب التقديم نفس قواعد القالب للتصدير.
يمكن للمسوقين اختبار المزيد من الأفكار مع التحكم في التفاصيل التي تجعل الفيديو يبدو مصقولاً.
البناء، المعاينة، والتقديم بثقة
يساعد Remotion Adstacker على التعامل مع إعلانات الفيديو كتركيبات ديناميكية قابلة لإعادة الاستخدام. يدعم نفس القالب استكشاف المتصفح والإخراج المتوقع، بينما تحافظ الطبقات المدركة للإطار على تزامن الترجمة، النصوص، والمقاطع.
قم بإنشاء مجموعتك التالية من الخطافات، الترجمة، والدعوات إلى العمل في Adstacker، قم بمعاينة التركيبات أثناء البناء، وقم بتصدير التغييرات الجاهزة للاختبار.
لقد طبقنا نفس الانضباط الذي يطابق المعاينة مع التصدير على بناءات منصة الفيديو الذكية الأخرى، بما في ذلك أدوات تحرير الشكل القصير في Ssemble’s وخط أنابيب التوليد المدفوع بالذكاء الاصطناعي في VideoCap، كلاهما تم توسيعه على بنية التقديم المدارة من خلال خدمات البنية التحتية السحابية.
التكنولوجيا المستخدمة: React · Next.js · Remotion · @remotion/player · AWS ECS render workers · FFmpeg
