Skip to main content
\n\n
\n```\n\n这个封装组件将作为 Svelte 和 Remotion 的 React 组件之间的桥梁。\n\n🌐 This wrapper component will serve as the bridge between Svelte and Remotion’s React components.\n\n## 为 Remotion 播放器创建一个封装器 \\{#create-a-wrapper-for-the-remotion-player}\n\n🌐 Create a wrapper for the Remotion Player\n\n1. 在你的 `remotion` 文件夹中，创建一个名为 `PlayerView.tsx` 的文件。\n2. 确保每个 `.tsx` 文件在文件顶部显式导入 React：\n\n这将获取对 `createRef` 播放器 的引用。\n\n🌐 This will get the reference to the player with `createRef`.\n\n```tsx title=\"PlayerView.tsx\"\nimport React, {forwardRef, useEffect, useImperativeHandle} from \"react\";\nimport {Player, type PlayerRef} from \"@remotion/player\";\nimport {HelloWorld} from \"./HelloWorld\";\n\nexport interface PlayerSchema {\n titleText: string\n titleColor: string\n logoColor1: string\n logoColor2: string\n}\n\nexport const PlayerView = forwardRef((props: { data: PlayerSchema, onPaused?: () => void }, ref) => {\n\n const playerRef: React.RefObject = React.createRef()\n\n useEffect(() => {\n if (playerRef.current) {\n\n // add callback when player pauses\n playerRef.current.addEventListener('pause', () => {\n props.onPaused?.()\n })\n }\n }, [])\n\n useImperativeHandle(ref, () => ({\n get playerRef() {\n return playerRef.current;\n },\n }));\n\n return \n})\n```\n\n## 在 Svelte 中使用组件 \\{#use-the-component-in-svelte}\n\n🌐 Use the component in Svelte\n\n要在 Svelte 模板中显示 Remotion 播放器，请在希望播放器出现的任何位置添加你的新封装组件：\n\n🌐 To display the Remotion player within an Svelte template, add your new wrapper component wherever you'd like the Player to appear:\n\n```html\n\n```\n\n这个 Svelte 组件标签将渲染 Remotion 播放器，允许你通过 Svelte 的数据绑定根据需要传递数据或配置。\n\n🌐 This Svelte component tag will render the Remotion Player, allowing you to pass data or configuration as needed through Svelte's data binding.\n\n你现在可以通过 `player` 绑定使用播放器的 [`API`](/docs/player/player)。\n\n🌐 You're now able to use the [`API`](/docs/player/player) of the player via the `player` binding.\n\n## 另请参阅 \\{#see-also}\n\n🌐 See also\n\n- [本文档的源代码](https://github.com/remotion-dev/svelte-starter)\n- [集成到 Angular](/docs/angular)\n- [集成到 Vue](/docs/vue)\n\n\n\n\n"

在 Svelte 中使用 Remotion

🌐 Using Remotion in Svelte

本指南解释了如何将 Remotion 集成到 Svelte 项目中。

🌐 This guide explains how to integrate Remotion into a Svelte project.

安装所需的软件包​

🌐 Install required packages

安装 Remotion 及必要的依赖：

🌐 Install Remotion and necessary dependencies:

Use npm as the package manager
npm i remotion @remotion/player @remotion/cli react react-dom
npm i --save-dev @types/react @types/react-dom

创建一个 Remotion 文件夹​

🌐 Create a Remotion folder

为了更好的区分，请创建一个文件夹来存放你的 Remotion 文件：

🌐 For better separation, create a folder to hold your Remotion files:

src/remotion

将你的 Remotion 项目或一个入门模板（例如 HelloWorld）的内容复制到这个新文件夹中。这将有助于将 Remotion 相关文件与其余的 Svelte 代码库分开。

🌐 Copy the contents of your Remotion project or a starter template (e.g., HelloWorld) into this new folder. This will help separate Remotion related files from the rest of your Svelte codebase.

复制 remotion.config.ts​

🌐 Copy remotion.config.ts

将 remotion.config.ts 文件复制到你的 Svelte 项目的根目录，放在与 package.json 同一层级。

🌐 Copy the remotion.config.ts file to the root directory of your Svelte project, placing it at the same level as package.json.

此配置文件对于 Remotion 识别并编译你的项目设置是必要的。

🌐 This configuration file is necessary for Remotion to recognize and compile your project settings.

为 JSX 配置 TypeScript​

🌐 Configure TypeScript for JSX

要在 Svelte 中启用 JSX 支持，请通过在 compilerOptions 下设置 "jsx": "react" 来更新 tsconfig.app.json 文件。此配置允许 Svelte 解释在 Remotion 的 React 组件中使用的 JSX 语法。

🌐 To enable JSX support in Svelte, update the tsconfig.app.json file by setting "jsx": "react" under compilerOptions. This configuration allows Svelte to interpret JSX syntax used in Remotion's React components.

tsconfig.json
{
  "compilerOptions": {
    "jsx": "react",
    // other options
  }
}

为 Svelte 创建一个 React 封装组件​

🌐 Create a React wrapper component for Svelte

要在 Svelte 中嵌入 Remotion 组件，请创建一个 封装组件：

🌐 To embed Remotion components in Svelte, create a wrapper component:

  1. 在你的 remotion 文件夹中，创建一个名为 PlayerViewWrapper.svelte 的文件。
PlayerViewWrapper.svelte
<script lang="ts">
    import {onDestroy, onMount} from "svelte";
    import React from "react";
    import {createRoot, type Root} from "react-dom/client";
    import {type PlayerSchema, PlayerView} from "./PlayerView";
    import {type PlayerRef} from "@remotion/player";

    let {data, player = $bindable<PlayerRef>(), onPaused} = $props<{ data: PlayerSchema, player: PlayerRef, onPaused: void }>()
    let containerRef;
    let root: Root;

    // used to rerender the player when changes made
    $effect(() => {
        // we need to access the property in the $effect, because Svelte doesn't automatically detect deep changes. Use flat structure or Svelte Store instead.
        console.log(data.titleText)
        render()
    });

    function render() {
        if (!containerRef || !root) return;
        root.render(
            React.createElement(PlayerView, {
                ref: (ref) => {
                    player = ref?.playerRef
                }, data, onPaused,
            }),
        );
    }

    onMount(() => {
        root = createRoot(containerRef);
        render();
    });

    onDestroy(() => {
        root?.unmount();
    });
</script>

<div bind:this={containerRef}></div>

这个封装组件将作为 Svelte 和 Remotion 的 React 组件之间的桥梁。

🌐 This wrapper component will serve as the bridge between Svelte and Remotion’s React components.

为 Remotion 播放器创建一个封装器​

🌐 Create a wrapper for the Remotion Player

  1. 在你的 remotion 文件夹中，创建一个名为 PlayerView.tsx 的文件。
  2. 确保每个 .tsx 文件在文件顶部显式导入 React：

这将获取对 createRef 播放器 的引用。

🌐 This will get the reference to the player with createRef.

PlayerView.tsx
import React, {forwardRef, useEffect, useImperativeHandle} from "react";
import {Player, type PlayerRef} from "@remotion/player";
import {HelloWorld} from "./HelloWorld";

export interface PlayerSchema {
    titleText: string
    titleColor: string
    logoColor1: string
    logoColor2: string
}

export const PlayerView = forwardRef((props: { data: PlayerSchema, onPaused?: () => void }, ref) => {

    const playerRef: React.RefObject<PlayerRef> = React.createRef()

    useEffect(() => {
        if (playerRef.current) {

            // add callback when player pauses
            playerRef.current.addEventListener('pause', () => {
                props.onPaused?.()
            })
        }
    }, [])

    useImperativeHandle(ref, () => ({
        get playerRef() {
            return playerRef.current;
        },
    }));

    return <Player
        ref={playerRef}
        component={HelloWorld}
        durationInFrames={150}
        fps={30}
        compositionHeight={1080}
        compositionWidth={1920}
        inputProps={props.data}
        style={{width: '100%'}}
        controls
    />
})

在 Svelte 中使用组件​

🌐 Use the component in Svelte

要在 Svelte 模板中显示 Remotion 播放器，请在希望播放器出现的任何位置添加你的新封装组件：

🌐 To display the Remotion player within an Svelte template, add your new wrapper component wherever you'd like the Player to appear:

<PlayerViewWrapper bind:player={player} {onPaused} {data}/>

这个 Svelte 组件标签将渲染 Remotion 播放器，允许你通过 Svelte 的数据绑定根据需要传递数据或配置。

🌐 This Svelte component tag will render the Remotion Player, allowing you to pass data or configuration as needed through Svelte's data binding.

你现在可以通过 player 绑定使用播放器的 API。

🌐 You're now able to use the API of the player via the player binding.

另请参阅​

🌐 See also

CONTRIBUTORS
Last updated on