فيديو الشفافية الأولي في Chrome

Sam Dutton
François Beaufort
François Beaufort
GitHub

شفافية ألفا في فيديو Chrome

يتيح الإصدار 31 من Chrome الآن شفافية ألفا للفيديو في WebM.

بعبارة أخرى، يأخذ Chrome قناة ألفا في الاعتبار عند تشغيل فيديوهات الشاشة الخضراء التي تم تشفيرها إلى WebM (VP8 وVP9) باستخدام قناة ألفا. وهذا يعني أنّه يمكنك تشغيل الفيديوهات التي تتضمّن خلفيات شفافة: فوق صفحات الويب أو الصور أو حتى الفيديوهات الأخرى.

يمكنك الاطّلاع على عرض توضيحي على الرابط simpl.info/videoalpha. يبدو الأمر خياليًا إلى حدٍ ما، وبعض التفاصيل غير واضحة (بشكل حرفي)، ولكن يمكنك فهم الفكرة.

كيفية إنشاء فيديوهات تجريبية

تستخدِم الطريقة التي نوضّحها أداتَي Blender وffmpeg المفتوحتَين المصدر:

  1. صوِّر الهدف أمام خلفية بلون واحد، مثل ستارة خضراء مشرق.
  2. عالج الفيديو لإنشاء صفيف من الصور الثابتة بتنسيق PNG مع بيانات الشفافية.
  3. ترميز المحتوى بتنسيق فيديو (في هذه الحالة، WebM)

تتوفّر أيضًا أدوات خاصة لإجراء المهمة نفسها، مثل Adobe After Effects، والتي قد تجدها أسهل.

1. إنشاء فيديو يستخدم شاشة خضراء

أولاً، عليك تصوير الهدف بطريقة تتيح "إزالة" (أو جعلها شفافة) كل ما في الخلفية من خلال المعالجة اللاحقة.

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

تتوفّر عدة أدلة على الإنترنت حول تصوير فيديوهات باستخدام تقنية "الشاشة الخضراء" (المعروفة أيضًا باسم مفتاح الكروما) والعديد من الأماكن لشراء خلفيات شاشة خضراء و زرقاء. بدلاً من ذلك، يمكنك طلاء خلفية باستخدام طلاء مفتاح الكروما.

توضّح المؤثرات البصرية في فيلم The Great Gatsby مدى الإمكانات التي يمكن تحقيقها باستخدام شاشة خضراء.

في ما يلي بعض النصائح لتصوير الفيديوهات:

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

2. إنشاء فيديو ألفا أولي من فيديو شاشة خضراء

توضّح الخطوات التالية طريقة واحدة لإنشاء فيديو ألفا أولي من فيديوهات شاشة خضراء:

  1. بعد تصوير فيديو باستخدام شاشة خضراء، يمكنك استخدام أداة مفتوحة المصدر مثل Blender لتحويل الفيديو إلى صفيف من ملفات PNG تتضمّن بيانات شفافية. استخدِم ميزة "مفتاح الألوان" في Blender لإزالة الشاشة الخضراء وجعلها شفافة. (يُرجى العِلم أنّ تنسيق PNG ليس مفروضًا: أي تنسيق يحافظ على بيانات قناة الشفافية مناسب).

  2. حوِّل صفيف ملفات PNG إلى فيديو YUVA أوّلي باستخدام أداة مفتوحة المصدر، مثل ffmpeg:

    ffmpeg -i image%04d.png -pix_fmt yuva420p video.raw

    يمكنك بدلاً من ذلك ترميز الملفات إلى WebM مباشرةً باستخدام أمر ffmpeg على النحو التالي:

    ffmpeg -i image%04d.png output.webm

إذا أردت إضافة صوت، يمكنك استخدام ffmpeg لدمج ذلك باستخدام أمر مثل هذا:

ffmpeg -i image%04d.png -i audio.wav output.webm

3- ترميز فيديو ألفا إلى WebM

يمكن ترميز الفيديوهات الأولية غير المكتملة إلى WebM بطريقتَين.

  1. باستخدام ffmpeg: أضفنا إمكانية استخدام ffmpeg لتشفير فيديوهات WebM التجريبية.

    استخدِم ffmpeg مع فيديو إدخال يتضمّن بيانات ألفا، واضبط تنسيق الإخراج على WebM، وسيتم الترميز تلقائيًا بالتنسيق الصحيح وفقًا للمواصفات. (ملاحظة: عليك حاليًا التأكّد من الحصول على أحدث إصدار من ffmpeg من شجرة git لكي يعمل هذا الإجراء).

    نموذج الطلب:

    ffmpeg -i myAlphaVideo.webm output.webm

  2. باستخدام webm-tools:

    git clone https://chromium.googlesource.com/webm/libvpx

    webm-tools هي مجموعة من الأدوات البسيطة المفتوحة المصدر ذات الصلة بتنسيق WebM، والتي يشرف عليها مؤلفو مشروع WebM، بما في ذلك أداة لإنشاء فيديوهات WebM ذات شفافية ألفا.

    يمكنك تشغيل الملف الثنائي باستخدام --help للاطّلاع على قائمة الخيارات المتوافقة مع alpha_encoder.

4. تشغيل المحتوى في Chrome

لتشغيل ملف WebM المشفَّر في Chrome، ما عليك سوى ضبط الملف كمصدر لعنصر فيديو.

كيف تم ذلك؟

لقد تحدثنا إلى المهندس في Google، فيغيش فينكاتاسوبرامانيان، عن عمله على المشروع. ولخّص التحديات الرئيسية التي تواجهها:

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

يمكننا التفكير في الكثير من حالات الاستخدام المثيرة للاهتمام لميزة شفافية ألفا في الفيديو: الألعاب والفيديوهات التفاعلية وسرد القصص التعاوني (إضافة الفيديو الخاص بك إلى فيديو/صورة في الخلفية) والفيديوهات التي تتضمّن شخصيات أو حبكات بديلة وتطبيقات الويب التي تستخدم مكوّنات الفيديو المتراكب.

نتمنى لك تجربة ممتعة في صناعة الأفلام. يُرجى إعلامنا إذا نجحت في إنشاء ميزة رائعة باستخدام ميزة "الشفافية" المتوفّرة في الإصدار التمهيدي.

مراجع مفيدة