فيديو الشفافية الأولي في 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 VFX مقدار ما يمكن تحقيقه باستخدام الشاشة الخضراء.

بعض النصائح للتصوير:

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

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

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

  1. بعد تصوير فيديو بشاشة خضراء، يمكنك استخدام أداة مفتوحة المصدر، مثل Blender، لتحويل الفيديو. إلى صفيف من ملفات PNG مع بيانات ألفا. استخدِم مفاتيح الألوان في الخلاط إزالة الشاشة الخضراء وجعلها شفافة. (لاحظ أن 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:

    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 مسارات عرض متعددة لأجهزة/أجهزة معالجة رسومات متعددة. كلّ كان يجب تغيير مسار العرض لدعم عرض الفيديوهات الأولية.

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

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

مراجع مفيدة