וידאו עם שקיפות בHTML

אסף כ"ץ
25.10.2022

לאחרונה עלה לאויר האתר החדש שפיתחנו ל-Hexa. החברה פיתחה טכנולוגייה המאפשרת לרוכש בחנות און-ליין לראות את המוצר בתלת מימד, לפני הרכישה. השפה הויזואלית החדשה שיצרו להם בFirma, התבססה מן הסתם על אובייקטים תלת מימדיים, ולחברה היה חשוב שטכנולוגית ה3D המתקדמת תקבל ביטוי באתר החדש שלה לא רק בנראות אלא גם בתחושה ובחוויה. לצורך פיתוח האתר חברנו לצוות של Firma שאפיינו ועיצבו, ואחד האתגרים שנתקלנו בהם היה למצוא פתרון קל משקל לאובייקטים אנימטיביים עם רקע שקוף, על מנת ליצור הרגשת של מרחב תלת מימדי, כמו שאפשר לראות פה בצילום המסך מן האתר:

מלבד המשקל הקל יחסית, נדרשנו לפורמט שירד בקלות בגרון גם למעבד של המחשב ושלא יהיה "לאגי". עברנו תהליך ארוך של ניסוי וטעיה עם פורמטים שונים, כולל סיקוונס של תמונות PNG עם רקע שקוף, אבל אף פתרון לא נתן את התוצאה המיוחלת.

ואז גילינו שקיימת אפשרות נוספת – וידאו עם רקע שקוף.

מסתבר שוידאו עם רקע שקוף קיים כבר זמן מה, יחד עם זאת לא נראה שהשימוש בו מאוד נפוץ, וחבל. הקובץ שנוצר הוא קובץ קל בדרך כלל – הן במשקל והן על המעבד של המחשב, ויכול לשדרג מאוד את העיצוב שלכם. כנראה שדיסאינפורציה וחוסר הנגישות של תהליך הפקת הוידאו מרחיקות אנשים מהפורמט הזה וחבל.

אני אנסה לעשות קצת סדר בקשר לפורמט הזה, בתקווה שיכול לשרת עוד אנשים, ואולי לבסוף להפוך לפורמט זמין ופשוט להכנה.

אז יאללה, בואו נתחיל.

קיימים כיום שני פורמטים עבור HTML שתומכים בוידאו עם רקע שקוף – webm ו-mp4. גם כאן גוגל ואפל מנסות לקדם כל אחת את הפורמט שלהן, כש-webm עם רקע שקוף נתמך רק בפיירפוקס ובכרום (וככל הנראה כל דפדפן שפועל על מנוע כרומיום), ו-mp4 עם רקע שקוף נתמך רק בספארי (בדפדפני כרום הקובץ הזה ירונדר עם רקע שחור). אם כך, נצטרך שיהיו בידינו בסופו של דבר שני קבצי וידאו בשני פורמטים שונים.

כרגיל, בכל מה שקשור למוצריה, אפל מערימה קשיים, וכדי לייצר את קובץ ה-mp4 עם הרקע השקוף תיהיו חייבים להשתמש במערכת ההפעלה של מק (בעלי PC – אל תאבדו תקווה, בשלב 2 נדבר על הפתרון עבורכם).

בואו נעבור על התהליך שלב שלב:

שלב 1 – רינדור קובץ המאסטר עם הרקע השקוף

קודם כל אנחנו צריכים לייצר את וידאו המאסטר עם הרקע השקוף, שממנו נכין את שתי הגרסאות שלנו. גם אם כבר יש לכם אחד כזה (למשל קובץ שנרכש מלכתחילה עם רקע שקוף), בכל זאת תצטרכו להעביר אותו בתוכנת עריכת וידאו ולוודא שהוא מקודד בצורה שתתאים בהמשך להמרה לשני הפורמטים.

אני אסביר איך עושים את זה בAfter Effects, בתוכנות אחרות תצטרכו לחפש את ההגדרות המתאימות (המבינים באפטר יוכלו לעשות את זה לבד, או להעביר את ההוראות כאן לאפטריסט).

באפטר, לאחר השליחה לrender queue, בתפריט של הOutput Module נבחר ב- Quicktime  כפורמט שלנו (1). לאחר מכן נלחץ על Format Options (2)  וכ-Video Codec שלנו נבחר ב  (3) Apple Prores 4444 .

לאחר שנאשר תתווסף לנו אופציה בChannels של RGB+Alpha (4), שאותה נבחר.

עכשיו, כשכל ההגדרות מתאימות לנו, נרנדר את הקובץ.

שלב 2 – המרה לפורמטים הנתמכים בדפדפנים (webm ו-mp4)

אז ככה – קיימות מספר אפשרויות לייצא קובץ webm עם רקע שקוף, כמו למשל תוכנת Shutter Encoder שאפשר להוריד פה, ובכלל חיפוש בגוגל של הנושא יעלה הרבה תוצאות.

הבעיה עם הפורמט הזה כאמור, היא שהרקע השקוף שלו נתמך בכרום ופיירספוקס, אבל לא בספארי. פה הענין קצת יותר מורכב – לא משנה כמה חיפשנו וניסינו – אין שום פתרון שמאפשר ייצוא של קבצי mp4 עם רקע שקוף מPC עם Windows, ואם אין לכם מערכת הפעלה של מק, לא תוכלו לייצא את הפורמט הזה.

אז אם יש לכם מק – הרווחתם – דלגו ישר לשלב הבא. ואם אין לכם מק, עומדות בפניכם שתי אופציות – או לבקש ממכר עם מק שימיר לכם את הקובץ, או להתקין Mac OS על מכונה וירטואלית במחשב שלכם. מכונה וירטואלית היא אפליקציה שמדמה סביבה של מחשב אחר, על המחשב שלכם. במקרה הזה האפליקציה מדמה סביבת מק ומאפשרת להתקין עליה את מערכת ההפעלה הנכספת.

זה נשמע כמו הרבה טרחה, אבל אם יש לכם מספר לא מבוטל של סרטונים להמיר, יכול ליהיות שזה הפתרון עבורכם. בסופו של יום יהיה ברשותכם סוג של מק וזה יכול ליהיות שימושי לעוד דברים בעתיד.

ההתקנה היא לא תהליך מאוד פשוט ואינטואיטיבי, אבל אם יש לכם קצת חוש טכני והרבה סבלנות – תעמדו בזה. אנחנו השתמשנו במכונה הוירטואלית VMware ועקבנו אחרי המדריך הזה.

שלב 3 – המרה של קובץ המקור שלנו לפורמטים המתאימים לצפיה בדפדפן

השלב האחרון הוא התקנה של אפליקציה קלה וחמודה בשם Rotato Converter על המק או המק המדומה שלכם. ניתן להוריד אותה כאן. גוררים אליה את הקובץ שרוצים להמיר והיא כבר מכינה 2 גרסאות שלו – mp4 ו-webm ושומרת אותן באותה תיקייה.

בסופו של יום את הוידאו מטמיעים בעמוד הHTML כך (כש{VIDEO_NAME} מייצג כמובן את שם הקובץ שלכם):


<video width="300" height="150"> 
<!-- Provide the Safari video --> 
<source src="{VIDEO_NAME}.mp4" type="video/mp4; codecs=&quot;hvc1&quot;" /> 
<!-- .. and the Chrome video --> 
<source src="{VIDEO_NAME}.webm" type="video/webm" /> 
</video> 

תתחדשו, יש לכם וידאו עם רקע שקוף!

מקווה שהמדריך עזר לכם, ושנראה בעתיד יותר ויותר שימוש של הפורמט המדליק הזה. אם יש לכם שאלות – מוזמנים לשאול אותי שאלות דרך הלינקדאין שלי, או פה בטופס:








    * שדות חובה


    This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.