Skip to main content

@remotion/player示例

简单示例​

tsx
import { Player } from "@remotion/player";
import { MyVideo } from "./remotion/MyVideo";
 
export const App: React.FC = () => {
  return (
    <Player
      component={MyVideo}
      durationInFrames={120}
      compositionWidth={1920}
      compositionHeight={1080}
      fps={30}
    />
  );
};
tsx
import { Player } from "@remotion/player";
import { MyVideo } from "./remotion/MyVideo";
 
export const App: React.FC = () => {
  return (
    <Player
      component={MyVideo}
      durationInFrames={120}
      compositionWidth={1920}
      compositionHeight={1080}
      fps={30}
    />
  );
};

添加控件​

tsx
import { Player } from "@remotion/player";
import { MyVideo } from "./remotion/MyVideo";
 
export const App: React.FC = () => {
  return (
    <Player
      component={MyVideo}
      durationInFrames={120}
      compositionWidth={1920}
      compositionHeight={1080}
      fps={30}
      controls
    />
  );
};
tsx
import { Player } from "@remotion/player";
import { MyVideo } from "./remotion/MyVideo";
 
export const App: React.FC = () => {
  return (
    <Player
      component={MyVideo}
      durationInFrames={120}
      compositionWidth={1920}
      compositionHeight={1080}
      fps={30}
      controls
    />
  );
};

循环视频​

tsx
import { Player } from "@remotion/player";
import { MyVideo } from "./remotion/MyVideo";
 
export const App: React.FC = () => {
  return (
    <Player
      component={MyVideo}
      durationInFrames={120}
      compositionWidth={1920}
      compositionHeight={1080}
      fps={30}
      controls
      loop
    />
  );
};
tsx
import { Player } from "@remotion/player";
import { MyVideo } from "./remotion/MyVideo";
 
export const App: React.FC = () => {
  return (
    <Player
      component={MyVideo}
      durationInFrames={120}
      compositionWidth={1920}
      compositionHeight={1080}
      fps={30}
      controls
      loop
    />
  );
};

更改大小​

tsx
import { Player } from "@remotion/player";
import { MyVideo } from "./remotion/MyVideo";
 
export const App: React.FC = () => {
  return (
    <Player
      component={MyVideo}
      durationInFrames={120}
      compositionWidth={1920}
      compositionHeight={1080}
      fps={30}
      controls
      loop
      style={{
        width: 1280,
        height: 720,
      }}
    />
  );
};
tsx
import { Player } from "@remotion/player";
import { MyVideo } from "./remotion/MyVideo";
 
export const App: React.FC = () => {
  return (
    <Player
      component={MyVideo}
      durationInFrames={120}
      compositionWidth={1920}
      compositionHeight={1080}
      fps={30}
      controls
      loop
      style={{
        width: 1280,
        height: 720,
      }}
    />
  );
};
note

查看缩放以获取更多缩放播放器的方法。

添加自动播放​

tsx
import { Player } from "@remotion/player";
import { MyVideo } from "./remotion/MyVideo";
 
export const App: React.FC = () => {
  return (
    <Player
      component={MyVideo}
      durationInFrames={120}
      compositionWidth={1920}
      compositionHeight={1080}
      fps={30}
      controls
      loop
      style={{
        width: 1280,
        height: 720,
      }}
      autoPlay
    />
  );
};
tsx
import { Player } from "@remotion/player";
import { MyVideo } from "./remotion/MyVideo";
 
export const App: React.FC = () => {
  return (
    <Player
      component={MyVideo}
      durationInFrames={120}
      compositionWidth={1920}
      compositionHeight={1080}
      fps={30}
      controls
      loop
      style={{
        width: 1280,
        height: 720,
      }}
      autoPlay
    />
  );
};
tip

您需要注意浏览器的自动播放策略。在大多数浏览器中，您无法自动播放带有音频的音频文件或视频。

以编程方式控制播放器​

tsx
import { Player, PlayerRef } from "@remotion/player";
import { useCallback, useRef } from "react";
import { MyVideo } from "./remotion/MyVideo";
 
export const App: React.FC = () => {
  const playerRef = useRef<PlayerRef>(null);
 
  const seekToMiddle = useCallback(() => {
    const { current } = playerRef;
    if (!current) {
      return;
    }
    current.seekTo(60);
  }, []);
 
  return (
    <Player
      ref={playerRef}
      component={MyVideo}
      durationInFrames={120}
      compositionWidth={1920}
      compositionHeight={1080}
      fps={30}
    />
  );
};
tsx
import { Player, PlayerRef } from "@remotion/player";
import { useCallback, useRef } from "react";
import { MyVideo } from "./remotion/MyVideo";
 
export const App: React.FC = () => {
  const playerRef = useRef<PlayerRef>(null);
 
  const seekToMiddle = useCallback(() => {
    const { current } = playerRef;
    if (!current) {
      return;
    }
    current.seekTo(60);
  }, []);
 
  return (
    <Player
      ref={playerRef}
      component={MyVideo}
      durationInFrames={120}
      compositionWidth={1920}
      compositionHeight={1080}
      fps={30}
    />
  );
};

监听事件​

tsx
import { Player, PlayerRef } from "@remotion/player";
import { useEffect, useRef } from "react";
import { MyVideo } from "./remotion/MyVideo";
 
export const App: React.FC = () => {
  const playerRef = useRef<PlayerRef>(null);
 
  useEffect(() => {
    const { current } = playerRef;
    if (!current) {
      return;
    }
 
    const listener = () => {
      console.log("paused");
    };
    current.addEventListener("pause", listener);
    return () => {
      current.removeEventListener("pause", listener);
    };
  }, []);
 
  return (
    <Player
      ref={playerRef}
      component={MyVideo}
      durationInFrames={120}
      compositionWidth={1920}
      compositionHeight={1080}
      fps={30}
    />
  );
};
tsx
import { Player, PlayerRef } from "@remotion/player";
import { useEffect, useRef } from "react";
import { MyVideo } from "./remotion/MyVideo";
 
export const App: React.FC = () => {
  const playerRef = useRef<PlayerRef>(null);
 
  useEffect(() => {
    const { current } = playerRef;
    if (!current) {
      return;
    }
 
    const listener = () => {
      console.log("paused");
    };
    current.addEventListener("pause", listener);
    return () => {
      current.removeEventListener("pause", listener);
    };
  }, []);
 
  return (
    <Player
      ref={playerRef}
      component={MyVideo}
      durationInFrames={120}
      compositionWidth={1920}
      compositionHeight={1080}
      fps={30}
    />
  );
};

交互式播放器​

tsx
import { Player } from "@remotion/player";
import { useState, useMemo } from "react";
import { MyVideo } from "./remotion/MyVideo";
 
export const App: React.FC = () => {
  // Connect the state to a text field
  const [text, setText] = useState("world");
  const inputProps = useMemo(() => {
    return {
      text,
    };
  }, [text]);
 
  return (
    <Player
      component={MyVideo}
      durationInFrames={120}
      compositionWidth={1920}
      compositionHeight={1080}
      fps={30}
      inputProps={inputProps}
    />
  );
};
tsx
import { Player } from "@remotion/player";
import { useState, useMemo } from "react";
import { MyVideo } from "./remotion/MyVideo";
 
export const App: React.FC = () => {
  // Connect the state to a text field
  const [text, setText] = useState("world");
  const inputProps = useMemo(() => {
    return {
      text,
    };
  }, [text]);
 
  return (
    <Player
      component={MyVideo}
      durationInFrames={120}
      compositionWidth={1920}
      compositionHeight={1080}
      fps={30}
      inputProps={inputProps}
    />
  );
};

仅播放视频的一部分​

tsx
import { Player } from "@remotion/player";
import { MyVideo } from "./remotion/MyVideo";
 
export const App: React.FC = () => {
  return (
    <Player
      component={MyVideo}
      durationInFrames={120}
      compositionWidth={1920}
      compositionHeight={1080}
      fps={30}
      loop
      inFrame={30}
      outFrame={60}
    />
  );
};
tsx
import { Player } from "@remotion/player";
import { MyVideo } from "./remotion/MyVideo";
 
export const App: React.FC = () => {
  return (
    <Player
      component={MyVideo}
      durationInFrames={120}
      compositionWidth={1920}
      compositionHeight={1080}
      fps={30}
      loop
      inFrame={30}
      outFrame={60}
    />
  );
};

懒加载组件​

tsx
import { Player } from "@remotion/player";
import { useCallback } from "react";
 
export const App: React.FC = () => {
  const lazyComponent = useCallback(() => {
    return import("./remotion/MyVideo");
  }, []);
 
  return (
    <Player
      lazyComponent={lazyComponent}
      durationInFrames={120}
      compositionWidth={1920}
      compositionHeight={1080}
      fps={30}
      loop
    />
  );
};
tsx
import { Player } from "@remotion/player";
import { useCallback } from "react";
 
export const App: React.FC = () => {
  const lazyComponent = useCallback(() => {
    return import("./remotion/MyVideo");
  }, []);
 
  return (
    <Player
      lazyComponent={lazyComponent}
      durationInFrames={120}
      compositionWidth={1920}
      compositionHeight={1080}
      fps={30}
      loop
    />
  );
};

另请参阅​