Remotion Player: להטמיע וידאו אינטראקטיבי באתר React (מדריך 2026)

Remotion Player הוא רכיב React שמנגן וידאו Remotion חי בדפדפן, בלי לרנדר אותו קודם ל-MP4. דרך החבילה @remotion/player מטמיעים את הסרטון ישירות באתר, ויכולים לשנות אותו בזמן אמת לפי קלט המשתמש. זהו החלק האינטראקטיבי של Remotion, המשך טבעי למדריך הראשי ולבניית וידאו מבוסס-נתונים.

בקצרה (TL;DR)

• מה זה: רכיב <Player> שמנגן קומפוזיציית Remotion חי בצד הלקוח, בלי רינדור מראש.
• למה זה חזק: המשתמש משנה שדה, הסרטון מתעדכן מיד. אידיאלי לקונפיגורטורים ולתצוגות חיות.
• איך שולטים: דרך PlayerRef, play, pause, seekTo, ואירועים כמו ended.
• Player מול רינדור: Player לתצוגה ואינטראקציה; renderMedia כשצריך קובץ MP4 קבוע.

מה זה Remotion Player?

Remotion Player הוא רכיב React מהחבילה @remotion/player שמנגן קומפוזיציית Remotion ישירות בדפדפן של המשתמש, אינטראקטיבית ובזמן אמת. זה אותו רכיב וידאו שממנו מרנדרים MP4, רק שכאן הוא רץ חי, בלי שלב רינדור.

ההבדל מעורך וידאו מוטמע רגיל: כאן הסרטון הוא קוד React, כך שכל פריים יכול להגיב למצב (state) של האפליקציה ולקלט המשתמש.

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

Remotion Player או רינדור ל-MP4: מה לבחור?

שתי הדרכים משתמשות באותו רכיב React, אבל לשימושים שונים. רבים משלבים את שתיהן באותו פרויקט:

איך מטמיעים את ה-Player? (דוגמת קוד)

מייבאים את Player, מעבירים לו את הרכיב ואת מאפייני הקומפוזיציה (משך, fps, מידות), ומפעילים פקדים:

import { Player } from "@remotion/player";
import { MyVideo } from "./MyVideo";

export const Embed = () => (
  <Player
    component={MyVideo}
    durationInFrames={150}
    fps={30}
    compositionWidth={1920}
    compositionHeight={1080}
    controls            // פס פקדים (play, סקרבר, ווליום)
    loop
    style={{ width: "100%" }}
    inputProps={{ title: "שלום מ-Remotion" }}
  />
);

זהו, הסרטון מתנגן בתוך עמוד ה-React שלכם, בלי שום קובץ וידאו ובלי רינדור.

איך שולטים בנגן מהקוד? (PlayerRef ואירועים)

לשליטה תכנותית מצמידים ref מסוג PlayerRef, וקוראים למתודות או מאזינים לאירועים:

import { Player, PlayerRef } from "@remotion/player";
import { useRef, useEffect } from "react";

export const Controlled = () => {
  const ref = useRef<PlayerRef>(null);

  useEffect(() => {
    const player = ref.current;
    if (!player) return;
    const onEnded = () => console.log("הסרטון הסתיים");
    player.addEventListener("ended", onEnded);
    return () => player.removeEventListener("ended", onEnded);
  }, []);

  return (
    <>
      <Player ref={ref} component={MyVideo} durationInFrames={150} fps={30} compositionWidth={1080} compositionHeight={1080} />
      <button onClick={() => ref.current?.play()}>נגן</button>
      <button onClick={() => ref.current?.seekTo(0)}>מהתחלה</button>
    </>
  );
};

מתודות נפוצות: play(), pause(), toggle(), seekTo(frame), getCurrentFrame(), mute(). אירועים נפוצים: play, pause, ended, seeked, timeupdate.

איך הופכים את הווידאו לאינטראקטיבי?

זו התכונה המרכזית: מעבירים את inputProps כ-state של React. כשהמשתמש משנה שדה, ה-state מתעדכן והסרטון משתנה מיד, בזמן אמת:

const [name, setName] = useState("דנה");

return (
  <>
    <input value={name} onChange={(e) => setName(e.target.value)} />
    <Player
      component={Wrapped}
      inputProps={{ name }}     // משתנה עם ה-state
      durationInFrames={300}
      fps={30}
      compositionWidth={1080}
      compositionHeight={1920}
    />
  </>
);

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

לאילו שימושים Remotion Player מתאים?

הנגן מבריק בכל מקום שבו הווידאו צריך להגיב למשתמש או להשתנות לפי נתונים חיים:

• קונפיגורטור וידאו: המשתמש בוחר טקסט, צבע ולוגו ורואה תצוגה חיה, לפני שמרנדרים את ה-MP4 הסופי.
• תצוגה מקדימה לפני הורדה: מציגים את הסרטון ב-Player, וברקע מרנדרים את הקובץ להורדה.
• דשבורד עם וידאו חי: גרפים ונתונים מונפשים שמתעדכנים מהנתונים האחרונים.
• דמו אינטראקטיבי במוצר: הסבר מונפש שמשתנה לפי הבחירות של המשתמש באתר.

איך Claude Code עוזר כאן?

מינואר 2026, עם Agent Skills של Remotion ל-Claude Code, אפשר לתאר בשפה טבעית גם את הטמעת ה-Player וגם את החיבור שלו ל-state, והסוכן כותב את הקוד.

דוגמת prompt: "הטמע Remotion Player באתר ה-React שלי, חבר את ה-inputProps לשדה טקסט שהמשתמש ממלא, והוסף כפתורי נגן/עצור עם PlayerRef."

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

שורה תחתונה

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

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

להמשך: מדריך Remotion המלא · וידאו מבוסס-נתונים עם Remotion · מה זה Claude Code · קורס Claude Code בחינם · אוטומציות AI לעסקים