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, אבל לשימושים שונים. רבים משלבים את שתיהן באותו פרויקט:

היבט	Remotion Player	רינדור (renderMedia)
איפה רץ	בדפדפן, בצד הלקוח	בשרת / Lambda
הפלט	ניגון חי, ללא קובץ	קובץ MP4 קבוע
אינטראקטיביות	מלאה — משתנה לפי קלט	אין — מה שרונדר זה מה שיש
מתי משתמשים	תצוגה מקדימה, קונפיגורטור, וידאו חי באתר	הורדה, הפצה, העלאה לרשתות
רינדור מראש	לא נדרש	נדרש

איך מטמיעים את ה-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 לעסקים