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

سام دوتون
فرانسوا بوفورت
فرانسوا بوفورت
GitHub

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

يتيح Chrome 31 الآن استخدام شفافية الفيديو الأولية في WebM.

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

ويتوفّر عرض توضيحي على simpl.info/videoalpha. سريالية نوعًا ما، وقاسية بعض الشيء (حرفيًا) لكنك فهمت الفكرة!

كيفية إنشاء فيديوهات ألفا

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

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

هناك أيضًا أدوات مملوكة لك تتيح لك تنفيذ المهمة نفسها، مثل أداة Adobe بعد Effects، والتي قد تجدها أكثر بساطة.

1- إنشاء فيديو يعرض شاشة خضراء

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

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

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

شريط فيديو VFX العظيم عن "غاتسبي" يوضّح مقدار ما يمكن إنجازه باستخدام الشاشة الخضراء.

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

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

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:

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

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

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

مراجع مفيدة