Remotion：使用前端技术开发视频

news2024/11/19 14:51:14

前言

最近做文章突然想到很多文章其实也可以用视频的方式来展现，以现在短视频的火爆程度，肯定能让更多的人看到。

恰巧最近看了很多关于动画的前端 js 库，那如果将这些动画帧连续起来，岂不是就成了一个视频吗？

而且还能以我最熟悉的编程的形式进行编辑视频，岂不是爽翻？

这样甚至可以根据 api 数据，动态地生成视频，想象空间大了去了。

有想法当然先上 github 逛一圈，果然被我找到好东西。

github：https://github.com/remotion-dev/remotion

官网：https://www.remotion.dev/

简介

Remotion 是一个开源库，它允许开发者使用 React 来创建视频。

这意味着你可以利用你已经熟悉的 Web 技术栈来制作视频内容，而无需学习复杂的视频编辑软件。

Remotion 的主要特点包括：

使用 React 创建视频：Remotion 让你可以使用 React 组件来构建视频的每一帧。
服务器端渲染：通过服务器端渲染，你可以大规模地生成视频。
参数化：你可以为视频添加参数，使其更加个性化和动态。
支持音频：Remotion 支持音频的渲染，让你的视频更加生动。
快速编辑：在浏览器中预览视频，快速刷新，并且可以拖动时间轴来调整每一帧。
程序化内容和渲染：你可以从 API 获取数据，并实时显示在视频中。
构建视频应用：使用 Remotion 提供的工具构建允许他人创建视频的应用。
Remotion 支持将视频渲染为 MP4 格式，并且也支持 WebM 等其他格式。它提供了一个命令行工具，可以快速开始一个新的视频项目，并且提供了一个播放器组件，可以在网页上嵌入和交互视频。

Remotion 的使用场景非常广泛，从制作营销视频、教育内容、动画到数据可视化等，都可以使用 Remotion 来实现。

安装

使用以下命令即可安装开始使用：(其它包管理器类似，本文使用 yarn)

yarn create video

过程中可以选择官方预置的各种模板

安装完成

基本使用（helloworld示例）

运行：

yarn start

我们可以看到如下界面

一个可视化的视频编辑器界面

生成视频

yarn remotion render

选择 helloworld 文件 即可生成 helloworld.mp4

浅玩一下

这次选择命令创建时的空白模板

修改 Composition.tsx 的代码为：

import { useCurrentFrame, AbsoluteFill } from "remotion";

const MyComposition = () => {
  const currentFrame = useCurrentFrame();

  let frame = currentFrame
  if(currentFrame > 60) {
    frame = 60;
  }

  const opacity = Math.min(1, frame / 60);
  const rotate = `rotate(${frame * 360 / 60}deg)`; // 每帧旋转6度，60帧完成360度旋转
  const fontSize = `${frame / 60 * 150}px`

  return (
    <AbsoluteFill
      style={{
        justifyContent: "center",
        alignItems: "center",
        fontSize,
        color:"purple",
        fontWeight:"bold",
        transform: rotate, // 应用旋转效果
        backgroundColor: "lightblue",
      }}
    >
      <div style={{ opacity, transition: "opacity 1s" }}>我码玄黄</div>
    </AbsoluteFill>
  );
};

export default MyComposition

得到了如下效果