Skip to main content
\n\n\n```\n\n这个封装组件将作为 VueJs 和 Remotion 的 React 组件之间的桥梁。\n\n🌐 This wrapper component will serve as the bridge between VueJs 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, {useEffect} from 'react';\nimport {Player, type PlayerRef} from '@remotion/player';\nimport {HelloWorld} from '@/remotion/HelloWorld';\nimport type {Ref} from 'vue';\n\nexport interface PlayerSchema {\n titleText: string;\n titleColor: string;\n logoColor1: string;\n logoColor2: string;\n}\n\nexport const PlayerView = ({\n data,\n playerRefInstance,\n onPaused,\n}: {\n data: PlayerSchema;\n playerRefInstance: Ref;\n onPaused?: () => void;\n}): React.ReactElement => {\n const playerRef: React.RefObject = React.createRef();\n\n useEffect(() => {\n if (playerRef.current) {\n playerRefInstance.value = playerRef.current;\n\n // add callback when player pauses\n playerRef.current.addEventListener('pause', () => {\n onPaused?.();\n });\n }\n }, []);\n\n return (\n \n );\n};\n```\n\n## 在 VueJS 中使用组件 \\{#use-the-component-in-vuejs}\n\n🌐 Use the component in VueJS\n\n要在 VueJS 模板中显示 Remotion 播放器，请在希望播放器出现的任何位置添加你的新封装组件：\n\n🌐 To display the Remotion player within an VueJS template, add your new wrapper component wherever you'd like the Player to appear:\n\n```html\n\n```\n\n这个 VueJS 组件标签将渲染 Remotion 播放器，允许你通过 VueJS 的数据绑定根据需要传递数据或配置。\n\n🌐 This VueJS component tag will render the Remotion Player, allowing you to pass data or configuration as needed through VueJS'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` ref binding\n\n## 另请参阅 \\{#see-also}\n\n🌐 See also\n\n- [此文档的源代码](https://github.com/remotion-dev/vue-starter)\n- [集成到 Angular](/docs/angular)\n- [集成到Svelte](/docs/svelte)\n\n\n\n\n"

在 Vue 中使用 Remotion

🌐 Using Remotion in Vue

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

🌐 This guide explains how to integrate Remotion into a Vue.js 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 @vitejs/plugin-react

创建一个 Remotion 文件夹​

🌐 Create a Remotion folder

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

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

src/remotion

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

🌐 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 VueJS codebase.

复制 remotion.config.ts​

🌐 Copy remotion.config.ts

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

🌐 Copy the remotion.config.ts file to the root directory of your VueJS 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

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

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

tsconfig.json
{
  "compilerOptions": {
    "jsx": "react",
    "jsxImportSource": "" // Recommended to avoid errors while building
    // other options
  }
}
note

建议使用 "jsxImportSource": "" 设置以防止构建问题。

为 React 配置 Vite​

🌐 Configure Vite for React

要在 Vite 中启用 React 支持，请通过在 vite.config.ts 文件中将 react 添加到插件来更新该文件。

🌐 To enable React support in Vite, update the vite.config.ts file by adding react to the plugins.

vite.config.ts
import {fileURLToPath, URL} from 'node:url';
import {defineConfig} from 'vite';
import vue from '@vitejs/plugin-vue';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    vue(),
    react({
      include: /\.(jsx|tsx)$/,
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
});

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

🌐 Create a React wrapper component for VueJS

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

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

  1. 在你的 remotion 文件夹中，创建一个名为 PlayerViewWrapper.vue 的文件。
PlayerViewWrapper.vue
<script lang="ts" setup>
  import {onBeforeUnmount, onMounted, ref, watch} from 'vue';
  import {type PlayerSchema, PlayerView} from '@/remotion/PlayerView';
  import {createRoot, type Root} from 'react-dom/client';
  import * as React from 'react';

  interface PlayerData {
    data: PlayerSchema;
  }

  const playerRef = ref();
  const reactRoot = ref();
  let root: Root;
  const emit = defineEmits(['paused']);

  const props = defineProps<PlayerData>();

  onMounted(() => {
    root = createRoot(reactRoot.value);
    render();
  });

  function render() {
    root.render(
      React.createElement(PlayerView, {
        data: props.data,
        playerRefInstance: playerRef,
        onPaused: () => emit('paused'),
      }),
    );
  }

  watch(
    () => playerRef,
    (newData, oldData) => {
      playerRef.value.play();
    },
    {deep: true},
  );

  watch(
    () => props.data,
    (newData, oldData) => {
      render();
    },
    {deep: true},
  );

  onBeforeUnmount(() => {
    if (root) {
      root.unmount();
    }
  });
</script>

<template>
  <div ref="reactRoot"></div>
</template>

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

🌐 This wrapper component will serve as the bridge between VueJs 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, {useEffect} from 'react';
import {Player, type PlayerRef} from '@remotion/player';
import {HelloWorld} from '@/remotion/HelloWorld';
import type {Ref} from 'vue';

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

export const PlayerView = ({
  data,
  playerRefInstance,
  onPaused,
}: {
  data: PlayerSchema;
  playerRefInstance: Ref<PlayerRef>;
  onPaused?: () => void;
}): React.ReactElement => {
  const playerRef: React.RefObject<PlayerRef> = React.createRef();

  useEffect(() => {
    if (playerRef.current) {
      playerRefInstance.value = playerRef.current;

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

  return (
    <Player
      ref={playerRef}
      component={HelloWorld}
      durationInFrames={150}
      fps={30}
      compositionHeight={1080}
      compositionWidth={1920}
      inputProps={data}
      controls
    />
  );
};

在 VueJS 中使用组件​

🌐 Use the component in VueJS

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

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

<PlayerWrapper @paused="onPaused" :data="data" />

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

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

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

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

另请参阅​

🌐 See also

CONTRIBUTORS
Last updated on