Remotion: יצירת סרטונים בצורה פרוגרמטית עם React

נקודה מרכזית

הריפו Remotion הוא פריימוורק שמאפשר לנו ליצור סרטונים בצורה פרוגרמטית באמצעות קומפוננטות React במקום תוכנות עריכת וידאו מסורתיות. פותח על ידי Jonny Burger, הוא מאפשר למפתחים למנף את כישורי ה-React הקיימים שלהם כדי לייצר סרטונים בסקייל, עם version control ואוטומציה מובנים.

מה זה Remotion?

Remotion הוא פריימוורק מהפכני ששינה לנו את הגישה לייצור וידאו על ידי כך שמאפשר לנו ליצור סרטונים באמצעות קוד. הפרויקט remotion-dev/remotion פותר את הבעיה של ייצור סרטונים בסקייל שכולנו מתמודדים איתה כשתוכנות עריכת וידאו מסורתיות לא תומכות באוטומציה או ב-version control.

במקום לגרור קליפים על timeline ב-After Effects או Premiere Pro, אנחנו כותבים קומפוננטות React עם JSX, CSS ו-JavaScript. Remotion אז מרנדר את הקומפוננטות האלה פריים אחרי פריים לקבצי וידאו אמיתיים - MP4, WebM, או פורמטי אודיו.

הבעיה שכולנו מכירים

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

מסתבר שתוכנות עריכת וידאו מסורתיות נכשלות כאן. אנחנו לא יכולים לעשות version control לפרויקטים של After Effects בצורה משמעותית. אנחנו לא יכולים לבצע אוטומציה של תהליכי עבודה ב-Premiere Pro בלי סקריפטים מורכבים. ולשכור עורכי וידאו כדי ליצור ידנית אלפי וריאציות? זה לא סקיילבילי ולא משתלם כלכלית.

הפתרונות הקיימים כוללים ייצוא דאטה לתבניות motion graphics, עדכון ידני של פרמטרים, או בניית צינורות רינדור מותאמים אישית מאפס באמצעות כלים כמו FFmpeg ישירות - מה שדורש ידע עמוק בקידוד וידאו שלרוב אין לנו.

איך Remotion עובד

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

אנחנו מקבלים גישה למספר הפריים הנוכחי דרך hooks כמו useCurrentFrame(). זה מאפשר לנו ליצור אנימציות מבוססות-זמן באמצעות לוגיקת JavaScript מוכרת. אנימציות CSS מתורגמות ישירות לאנימציות וידאו. אנחנו יכולים לייבא assets - תמונות, סרטונים, פונטים, אודיו - בדיוק כמו בכל אפליקציית React.

בואו נפרק את זה: מתחת למכסה המנוע, Remotion משתמש ב-Webpack לבאנדלינג של הקוד שלנו, ב-Babel לטרנספילציה, וב-FFmpeg לקידוד הוידאו בפועל. אבל אנחנו אף פעם לא מתקשרים עם FFmpeg ישירות - Remotion מפשט את כל המורכבות.

התחלה מהירה

ככה אנחנו מתחילים עם Remotion:

# התקנת Remotion
npm init video

# זה יוצר פרויקט Remotion חדש
cd my-video
npm start

# תצוגה מקדימה בדפדפן ב-localhost:3000
# רינדור הוידאו כשמוכנים
npm run build

דוגמה אמיתית

נגיד שאנחנו רוצים ליצור אנימציית fade-in פשוטה לכרטיס כותרת:

import {useCurrentFrame, useVideoConfig} from 'remotion';

export const TitleCard = ({title}) => {
  const frame = useCurrentFrame();
  const {fps} = useVideoConfig();
  
  // Fade in למשך שנייה (30 פריימים ב-30fps)
  const opacity = Math.min(1, frame / fps);
  
  // תזוזה למעלה מהתחתית
  const translateY = Math.max(0, 50 - frame);
  
  return (
    
      {title}
    
  );
};

עכשיו אנחנו יכולים לרנדר את זה עם כותרות שונות:

import {Composition} from 'remotion';
import {TitleCard} from './TitleCard';

export const RemotionRoot = () => {
  return (
    <>
      
    
  );
};

פיצ'רים מרכזיים

• תצוגה מקדימה בזמן אמת - הקטע המדליק הוא שאנחנו רואים את הוידאו מתעדכן בזמן אמת בזמן שאנחנו כותבים קוד, עם hot reloading. תחשבו על זה כמו Create React App אבל לסרטונים.
• מערכת Composition - יצירת תבניות וידאו לשימוש חוזר עם פרמטרים. אנחנו יכולים לרנדר את אותה composition עם props שונים כדי לייצר וריאציות בסקייל.
• רינדור server-side - דיפלוי לפונקציות Lambda ורינדור סרטונים באופן פרוגרמטי. מושלם לייצור תוכן מותאם אישית לפי דרישה.
• כל אקוסיסטם ה-React - שימוש בכל חבילת npm, TypeScript, hooks, ופטרנים מודרניים של React. כל ערכת הכלים של פיתוח ווב שלנו חלה על וידאו.
• שליטה ב-timeline - גישה למספרי פריימים ולמידע על timing כדי ליצור אנימציות מדויקות בלי לנחש.
• ניהול Assets - ייבוא תמונות, סרטונים, אודיו ופונטים בדיוק כמו באפליקציית web. בלי תהליכי עבודה מיוחדים של עריכת וידאו.

מתי להשתמש ב-Remotion לעומת אלטרנטיבות

כלי עריכת וידאו מסורתיים כמו After Effects ו-Premiere Pro מצטיינים בהפקות creative חד-פעמיות שבהן מעצבים צריכים שליטה עדינה ומשוב ויזואלי. הם הבחירה הנכונה ל-motion graphics ברמה גבוהה, compositing מורכב ופרויקטים אמנותיים.

הקטע המדליק ב-Remotion הוא כשאנחנו צריכים אוטומציה, סקייל, או ייצור פרוגרמטי. אם אנחנו מייצרים סרטונים מדאטה, צריכים version control לפרויקטי וידאו, או רוצים ליצור אלפי וריאציות מותאמות אישית, Remotion הוא הכלי הטוב יותר.

בהשוואה לכלים כמו Lottie (לאנימציות) או תבניות motion graphics, Remotion מציע יותר גמישות ושליטה. אנחנו לא מוגבלים לפרמטרים מוגדרים מראש - אנחנו יכולים לכתוב לוגיקת JavaScript שרירותית כדי לשלוט בכל היבט של הוידאו שלנו.

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

בעיניי - האם אשתמש בזה?

לעניות דעתי, Remotion מייצג שינוי פרדיגמה מהוותי באופן שבו אנחנו ניגשים לייצור וידאו. היכולת לעשות version control לפרויקטי וידאו דרך Git, לבצע אוטומציה של ייצור דרך קוד, ולמנף את כישורי הפיתוח הקיימים שלנו היא game-changing.

אני אשתמש בזה לכל פרויקט שצריך ייצור וידאו בסקייל - אוטומציה שיווקית, סרטוני ויזואליזציה של דאטה שמתעדכנים עם נתונים רעננים, תוכן מותאם אישית, או חומרים חינוכיים עם וריאציות. העובדה שאנחנו יכולים להתייחס לסרטונים כמו לקוד אומרת שאנחנו יכולים ליישם את כל שיטות העבודה המומלצות של פיתוח תוכנה שלנו: בדיקות, CI/CD, code review, ועוד.

המגבלה ברורה: זה לא תחליף לעריכת וידאו קריאייטיבית. אם אנחנו צריכים מעצב ליצור motion graphics יפים עם שליטה אמנותית, After Effects עדיין הכלי. Remotion דורש ידע בתכנות - ספציפית React - מה שיוצר עקומת למידה.

אבל לתוכן וידאו מונחה-מפתחים? זה משנה הכל. תבדקו את הפרויקט ב-remotion-dev/remotion.

שאלות נפוצות

מה זה Remotion?

Remotion הוא פריימוורק שמאפשר למפתחים ליצור סרטונים בצורה פרוגרמטית באמצעות קומפוננטות React, JSX ו-CSS במקום תוכנות עריכת וידאו מסורתיות.

מי יצר את Remotion?

הריפו Remotion נוצר על ידי Jonny Burger, שהקים את הפרויקט בינואר 2021 כדי להביא את הפרדיגמה של React לייצור וידאו.

מתי כדאי להשתמש ב-Remotion?

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

מה האלטרנטיבות ל-Remotion?

האלטרנטיבות כוללות תוכנות עריכת וידאו מסורתיות (After Effects, Premiere Pro) לפרויקטים קריאייטיביים, תבניות motion graphics לאוטומציה מוגבלת, FFmpeg ישירות לשליטה מקסימלית, ו-Lottie לאנימציות. כל אחד משרת יוזקייסים שונים.

מה המגבלות של Remotion?

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