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

前言

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

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

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

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

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

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

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

简介

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

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

Remotion 的主要特点包括:

  1. 使用 React 创建视频:Remotion 让你可以使用 React 组件来构建视频的每一帧。
  2. 服务器端渲染:通过服务器端渲染,你可以大规模地生成视频。
  3. 参数化:你可以为视频添加参数,使其更加个性化和动态。
  4. 支持音频:Remotion 支持音频的渲染,让你的视频更加生动。
  5. 快速编辑:在浏览器中预览视频,快速刷新,并且可以拖动时间轴来调整每一帧。
  6. 程序化内容和渲染:你可以从 API 获取数据,并实时显示在视频中。
  7. 构建视频应用:使用 Remotion 提供的工具构建允许他人创建视频的应用。
  8. 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 = currentFrameif(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 (<AbsoluteFillstyle={{justifyContent: "center",alignItems: "center",fontSize,color:"purple",fontWeight:"bold",transform: rotate, // 应用旋转效果backgroundColor: "lightblue",}}><div style={{ opacity, transition: "opacity 1s" }}>我码玄黄</div></AbsoluteFill>);
};export default MyComposition

得到了如下效果

总结

本文只是浅试了一下官方文档以及基础功能,并未深入探究使用,想象一下如果能够将 Cesium,以及 threejs 等功能也导入的话,岂不是实用性大大增加。

但是如此使用想来工作量也不会小,由于我对视频编辑不是特别了解,目前不太好衡量两者的优劣。

Remotion 是一个非常强大的工具,它允许开发者以编程的方式创建视频。

这不仅为视频制作带来了新的可能,也为那些希望以更动态的方式展示内容的创作者提供了新的机会。

如果你对 Remotion 感兴趣,不妨去它的 GitHub 页面和官网了解更多信息,或者直接尝试使用它来创建你自己的视频。

– 欢迎点赞、关注、转发、收藏【我码玄黄】,各大平台同名。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/53657.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

smartctl 命令:查看硬盘健康状态

一、命令简介 ​smartctl​ 命令用于获取硬盘的 SMART 信息。 介绍硬盘SMART 硬盘的 SMART (Self-Monitoring, Analysis, and Reporting Technology) 技术用于监控硬盘的健康状态&#xff0c;并能提供一些潜在故障的预警信息。通过查看 SMART 数据&#xff0c;用户可以了解硬…

Python第一篇:Python解释器

一&#xff1a;python解释器 python解释器是一款程序&#xff0c;用于解释、执行Python源代码。 一般python解释器都是c python使用c编写的&#xff0c;还有j python用java编写的。 二&#xff1a;python下载 三&#xff1a;使用示例 python进入控制台&#xff0c;python。 三…

Claude 的上下文检索功能提升了 RAG 准确率,这会是人工智能革命?

前言 在人工智能领域不断进步的过程中&#xff0c;人们对更准确且具备上下文理解能力的响应的追求&#xff0c;催生了诸多突破性创新。 而 Claude 的上下文检索技术就是其中一项进步&#xff0c;有望显著提升检索增强生成 (RAG) 系统的表现。 可能有同学就要问了&#xff1a;…

uniapp实现在表单中展示多个选项,并且用户可以选择其中的一个或多个选项

前言 uni-data-checkbox是uni-app的一个组件,用于在表单中展示多个选项,并且用户可以选择其中的一个或多个选项。该组件可以通过设置不同的参数来控制选项的样式、布局和行为。 提示:以下是本篇文章正文内容,下面案例可供参考 uni-data-checkbox组件具有以下特点:: 1、跨…

Html--笔记01:使用软件vscode,简介Html5--基础骨架以及标题、段落、图片标签的使用

一.使用VSC--全称&#xff1a;Visual Studio Code vscode用来写html文件&#xff0c;打开文件夹与创建文件夹&#xff1a;①选择文件夹 ②拖拽文件 生成浏览器的html文件的快捷方式&#xff1a; &#xff01;enter 运行代码到网页的方法&#xff1a; 普通方法&#xff1a…

Debian与Ubuntu:深入解读两大Linux发行版的历史与联系

Debian与Ubuntu&#xff1a;深入解读两大Linux发行版的历史与联系 引言 在开源操作系统的领域中&#xff0c;Debian和Ubuntu是两款备受瞩目的Linux发行版。它们不仅在技术上有着密切的联系&#xff0c;而且各自的发展历程和理念也对开源社区产生了深远的影响。本文将详细介绍…

从零开始学习Python

目录 从零开始学习Python 引言 环境搭建 安装Python解释器 选择IDE 基础语法 注释 变量和数据类型 变量命名规则 数据类型 运算符 算术运算符 比较运算符 逻辑运算符 输入和输出 控制流 条件语句 循环语句 for循环 while循环 循环控制语句 函数和模块 定…

丹摩智算(damodel)部署stable diffusion实验

名词解释&#xff1a; 丹摩智算&#xff08;damodel&#xff09;&#xff1a;是一款带有RTX4090&#xff0c;Tesla-P40等显卡的公有云服务器。 stable diffusion&#xff1a;是一个大模型&#xff0c;可支持文生图&#xff0c;图生图&#xff0c;文生视频等功能 一.实验目标 …

MODELS 2024震撼续章:科技与可持续性的未来交响曲

MODELS 2024国际会议正如火如荼地进行着&#xff0c;每一天都充满了新的发现与启迪&#xff0c;每一场分享都是对技术前沿的一次深刻探索&#xff0c;更是对现实世界可持续性挑战的一次积极回应。现在让我们继续这场科技盛宴&#xff0c;看看小编为您精选几场的学术分享吧~ 会议…

地质工程专业职称申报条件详细解读

一、初级&#xff08;助理&#xff09;地质工程工程师评审条件&#xff1a; 1、理工类或者地质工程类专业毕业 2、专科毕业满3年或本科毕业满1年 3、研究生毕业&#xff0c;从事本专业技术工作&#xff0c;当年内考核认定 二、中级地质工程工程师评审条件&#xff1a; 1、理工…

大数据 flink 01 | 从零环境搭建 简单Demo 运行

什么是Flink Flink是一个开源的流处理和批处理框架,它能够处理无界和有界的数据流&#xff0c;具有高吞吐量、低延迟和容错性等特点 Flink 可以应用于多个领域如&#xff1a;实时数据处理、数据分析、机器学习、事件驱动等。 什么是流式处理&#xff1f;什么是批处理 流处理…

xQTLs 共定位分析(XQTLbiolinks包)

XQTL 共定位分析 XQTLbiolinks 是一个端到端的生物信息学工具&#xff0c;由深圳湾实验室李磊研究团队开发&#xff0c;用于高效地分析公共或用户定制的个xQTLs数据。该软件提供了一个通过与 xQTLs 共定位分析进行疾病靶基因发现的流程&#xff0c;以检测易感基因和致病变异。…

【STM32】RTT-Studio中HAL库开发教程七:IIC通信--EEPROM存储器FM24C04

文章目录 一、简介二、模拟IIC时序三、读写流程四、完整代码五、测试验证 一、简介 FM24C04D&#xff0c;4K串行EEPROM&#xff1a;内部32页&#xff0c;每个16字节&#xff0c;4K需要一个11位的数据字地址进行随机字寻址。FM24C04D提供4096位串行电可擦除和可编程只读存储器&a…

2.1 HuggingFists系统架构(一)

系统架构 HuggingFists的前端主体开发语言为HtmlJavascript&#xff0c;后端的主体开发语言为Java。在算子部分有一定份额的Python代码&#xff0c;用于整合Python在数据处理方面强大能力。 功能架构 HuggingFists的功能架构如上&#xff0c;由下向上各层为&#xff1a; 数据存…

从文本图片到多模态:3D 数字人打开企业全域商业增长新空间

摘要&#xff1a;数字化与AI浪潮推动各行业变革&#xff0c;内容形式也发生巨变&#xff0c;从文本到多媒体的多模态表达&#xff0c;标志着内容创造走向升维。AIGC 3D生成技术的突飞猛进&#xff0c;彻底打破了传统3D内容生产门槛高、周期长、成本高昂的问题。将3D数字人的打造…

若依 Vue3 前端分离 3.8.8 版实现去除首页,登录后跳转至动态路由的第一个路由的页面

一、前言 某些项目可能并不需要首页&#xff0c;但在若依中想要实现不显示首页&#xff0c;并根据不同角色登录后跳转至该角色的第一个动态路由的页面需要自己实现&#xff0c;若依中没有实现该功能的特定代码。 二、代码 1. src\permission.js 在 src\permission.js 中添加…

VSCode编程配置再次总结

VScode 中C++编程再次总结 0.简介 1.配置总结 1.1 launch jsion文件 launch.json文件主要用于运行和调试的配置,具有程序启动调试功能。launch.json文件会启用tasks.json的任务,并能实现调试功能。 左侧任务栏的第四个选项运行和调试,点击创建launch.json {"conf…

探索 ShellGPT:终端中的 AI 助手

文章目录 探索 ShellGPT&#xff1a;终端中的 AI 助手背景介绍ShellGPT 是什么&#xff1f;如何安装 ShellGPT&#xff1f;简单的库函数使用方法场景应用常见问题及解决方案总结 探索 ShellGPT&#xff1a;终端中的 AI 助手 背景介绍 在当今快速发展的技术领域&#xff0c;命…

查询最近正在执行的sql(DM8 : 达梦数据库)

查询最近正在执行的sql DM8 : 达梦数据库 1 查询最近正在执行的sql2 更多达梦数据库学习使用列表 1 查询最近正在执行的sql 迁移数据时 , 业务无响应 , 查看最近活动的sql , 有没有迁移相关的表 , 通过最后的时间字段 , 判断会话是否正在执行 SELECT SESS_ID, SQL_TEXT, STATE…

redis哨兵启动出现 +sdown master mymaster 192.168.x.x

场景&#xff1a; 搭建好哨兵之后&#xff0c;哨兵一启动&#xff0c;过了30秒就会判断master sdown&#xff0c;但是检查配置是没有问题。 日志&#xff1a; Redis-master启动日志&#xff1a;没看到任何异常&#xff0c;所以master无异常 Redis-哨兵启动日志&#xff1a; …