Remotion最佳实践指南：字幕处理、FFmpeg视频操作、音频可视化与音效使用

remotion-best-practices by remotion-dev/skills

169,900 周安装量

2,300 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/remotion-dev/skills --skill remotion-best-practices

🇨🇳中文介绍

何时使用

在处理 Remotion 代码以获取领域特定知识时，请使用此技能。

字幕

在处理字幕或说明文字时，请加载 ./rules/subtitles.md 文件以获取更多信息。

使用 FFmpeg

对于一些视频操作，例如修剪视频或检测静音，应使用 FFmpeg。加载 ./rules/ffmpeg.md 文件以获取更多信息。

音频可视化

当需要可视化音频（频谱条、波形、低音反应效果）时，请加载 ./rules/audio-visualization.md 文件以获取更多信息。

音效

当需要使用音效时，请加载 ./rules/sound-effects.md 文件以获取更多信息。

如何使用

阅读各个规则文件以获取详细说明和代码示例：

rules/3d.md - 在 Remotion 中使用 Three.js 和 React Three Fiber 创建 3D 内容
rules/animations.md - Remotion 的基础动画技能
rules/assets.md - 将图像、视频、音频和字体导入 Remotion
rules/audio.md - 在 Remotion 中使用音频和声音 - 导入、修剪、音量、速度、音高
rules/calculate-metadata.md - 动态设置合成时长、尺寸和属性

🇺🇸English

When to use

Use this skills whenever you are dealing with Remotion code to obtain the domain-specific knowledge.

Captions

When dealing with captions or subtitles, load the ./rules/subtitles.md file for more information.

Using FFmpeg

For some video operations, such as trimming videos or detecting silence, FFmpeg should be used. Load the ./rules/ffmpeg.md file for more information.

Audio visualization

When needing to visualize audio (spectrum bars, waveforms, bass-reactive effects), load the ./rules/audio-visualization.md file for more information.

Sound effects

When needing to use sound effects, load the ./rules/sound-effects.md file for more information.

How to use

Read individual rule files for detailed explanations and code examples:

rules/3d.md - 3D content in Remotion using Three.js and React Three Fiber
rules/animations.md - Fundamental animation skills for Remotion
rules/assets.md - Importing images, videos, audio, and fonts into Remotion

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

相关 Skills

暂无相关 Skills

rules/can-decode.md - 使用 Mediabunny 检查浏览器是否可以解码视频

rules/charts.md - Remotion 的图表和数据可视化模式（条形图、饼图、折线图、股票图）

rules/compositions.md - 定义合成、静态图像、文件夹、默认属性和动态元数据

rules/extract-frames.md - 使用 Mediabunny 从视频的特定时间戳提取帧

rules/fonts.md - 在 Remotion 中加载 Google 字体和本地字体

rules/get-audio-duration.md - 使用 Mediabunny 获取音频文件的时长（以秒为单位）

rules/get-video-dimensions.md - 使用 Mediabunny 获取视频文件的宽度和高度

rules/get-video-duration.md - 使用 Mediabunny 获取视频文件的时长（以秒为单位）

rules/gifs.md - 显示与 Remotion 时间线同步的 GIF

rules/images.md - 使用 Img 组件在 Remotion 中嵌入图像

rules/light-leaks.md - 使用 @remotion/light-leaks 实现漏光叠加效果

rules/lottie.md - 在 Remotion 中嵌入 Lottie 动画

rules/measuring-dom-nodes.md - 在 Remotion 中测量 DOM 元素尺寸

rules/measuring-text.md - 测量文本尺寸、使文本适应容器以及检查溢出

rules/sequencing.md - Remotion 的序列模式 - 延迟、修剪、限制项目时长

rules/tailwind.md - 在 Remotion 中使用 TailwindCSS

rules/text-animations.md - Remotion 的排版和文本动画模式

rules/timing.md - Remotion 中的插值曲线 - 线性、缓动、弹簧动画

rules/transitions.md - Remotion 的场景过渡模式

rules/transparent-videos.md - 渲染具有透明度的视频

rules/trimming.md - Remotion 的修剪模式 - 剪切动画的开头或结尾

rules/videos.md - 在 Remotion 中嵌入视频 - 修剪、音量、速度、循环、音高

rules/parameters.md - 通过添加 Zod 模式使视频可参数化

rules/maps.md - 使用 Mapbox 添加地图并为其添加动画

rules/voiceover.md - 使用 ElevenLabs TTS 为 Remotion 合成添加 AI 生成的旁白

rules/audio.md - Using audio and sound in Remotion - importing, trimming, volume, speed, pitch

rules/calculate-metadata.md - Dynamically set composition duration, dimensions, and props

rules/can-decode.md - Check if a video can be decoded by the browser using Mediabunny

rules/charts.md - Chart and data visualization patterns for Remotion (bar, pie, line, stock charts)

rules/compositions.md - Defining compositions, stills, folders, default props and dynamic metadata

rules/extract-frames.md - Extract frames from videos at specific timestamps using Mediabunny

rules/fonts.md - Loading Google Fonts and local fonts in Remotion

rules/get-audio-duration.md - Getting the duration of an audio file in seconds with Mediabunny

rules/get-video-dimensions.md - Getting the width and height of a video file with Mediabunny

rules/get-video-duration.md - Getting the duration of a video file in seconds with Mediabunny

rules/gifs.md - Displaying GIFs synchronized with Remotion's timeline

rules/images.md - Embedding images in Remotion using the Img component

rules/light-leaks.md - Light leak overlay effects using @remotion/light-leaks

rules/lottie.md - Embedding Lottie animations in Remotion

rules/measuring-dom-nodes.md - Measuring DOM element dimensions in Remotion

rules/measuring-text.md - Measuring text dimensions, fitting text to containers, and checking overflow

rules/sequencing.md - Sequencing patterns for Remotion - delay, trim, limit duration of items

rules/tailwind.md - Using TailwindCSS in Remotion

rules/text-animations.md - Typography and text animation patterns for Remotion

rules/timing.md - Interpolation curves in Remotion - linear, easing, spring animations

rules/transitions.md - Scene transition patterns for Remotion

rules/transparent-videos.md - Rendering out a video with transparency

rules/trimming.md - Trimming patterns for Remotion - cut the beginning or end of animations

rules/videos.md - Embedding videos in Remotion - trimming, volume, speed, looping, pitch

rules/parameters.md - Make a video parametrizable by adding a Zod schema

rules/maps.md - Add a map using Mapbox and animate it

rules/voiceover.md - Adding AI-generated voiceover to Remotion compositions using ElevenLabs TTS