Author | Lightnews

Jonny Burger @jonny.io · 6d

Introducing remotion.dev/crop!

The easiest way to crop a video of all time.

fast ∙ free ∙ local ∙ ad-free ∙ offline ∙ open source

2

Jonny Burger @jonny.io · Sep 15

Today is the day!

Full WebCodecs support is now available in all major browsers, unlocking true multimedia processing in the frontend!

And the best way to harness the power: Mediabunny 🐰

5

Jonny Burger @jonny.io · Sep 8

What’s next for Remotion? 2 huge features:

• A more efficient <Video /> tag for speed gains
• In-browser rendering! Limited features but good enough for many videos.

This will be my main focus going forward!

Goal: This year 🔐

1

Jonny Burger @jonny.io · Jun 6

And of course, we put in a lot of effort to make it easy for you, the developer!

📒 www.remotion.dev/docs/webcode...

1

Jonny Burger @jonny.io · Jun 6

Our next WebCodecs API: extractFrames()!

With this primitive, you can efficiently extract thumbnails for displaying a preview in your editor. No <video> tag involved!

Filmstrips now show in the Remotion Studio and in the Pro <Timeline> component!

1 1

Jonny Burger @jonny.io · Jun 3

Source code of example: github.com/remotion-dev...

: github.com/remotion-dev...
Credits: TechSquidTV & Josiah Winslow

fitTextOnNLines() API - available from v4.0.313: remotion.dev/docs/layout-...

Uses a binary search text measuring algorithm implemented by HiteshChoudhary0098!

remotion/packages/example/src/Title/FitTextOnNLines.tsx at af09e07031bfecc1a1f222fc49f30c09f95a095f · remotion-dev/remotion

🎥 Make videos programmatically with React. Contribute to remotion-dev/remotion development by creating an account on GitHub.

github.com

Jonny Burger @jonny.io · Jun 3

Captions just like on TikTok 🚀

• New fitTextOnNLines() API in next version of Remotion
• <TikTokTextBox> component with auto-rounded corners – source in comments!

1 1

Jonny Burger @jonny.io · Apr 28

Remotion Media Parser is finished! 🥳✅

Next step: Produce a big proud announcement video and run it on all channels.

In the meanwhile start using it today, IYKYK!

2

Jonny Burger @jonny.io · Apr 22

We also released an even lower-level API which directly resamples the WebCodecs `AudioData` objects: www.remotion.dev/docs/webcode...

convertAudioData() | Remotion | Make videos programmatically

Part of the @remotion/webcodecs package.

www.remotion.dev

Jonny Burger @jonny.io · Apr 22

How to use it:
www.remotion.dev/docs/webcode...

Resample audio to 16kHz | Remotion | Make videos programmatically

For using Whisper, Whisper.cpp, @remotion/install-whisper-cpp and Whisper.wasm, you need to provide a 16-bit, 16KHz, WAVE audio file.

www.remotion.dev

1

Jonny Burger @jonny.io · Apr 22

You can now extract a 16kHz WAVE file from any video using @⁠remotion/webcodecs and on remotion.dev/convert!

This is useful because this is the input format that Whisper expects.

This is the first step towards a nice API for transcribing in the browser!

1

Jonny Burger @jonny.io · Apr 16

New Remotion template for musicians 🎵

• `bun create video --music-visualization`
• Drop in your music
• Customize components and CSS if you like
• `bunx remotion render`

Enjoy your music visualizer!

1 2

Jonny Burger @jonny.io · Apr 15

I'm now 30!

Lucky to still have my energy and joy :)

1

Jonny Burger @jonny.io · Mar 21

You've been wondering what @wcandillon.bsky.app has been up to...

1

Jonny Burger @jonny.io · Mar 19

If you are taking videos with MediaRecorder(), then you should re-mux them to fix these issues.

convertMedia() from Remotion allows you to do that, either in the browser, in Node.js or in Bun! www.remotion.dev/docs/webcode...

Fixing a MediaRecorder video | Remotion | Make videos programmatically

When recording a video with the MediaRecorder and getUserMedia() API, a WebM file gets created that may have some playback and compatibility issues.

www.remotion.dev

Jonny Burger @jonny.io · Mar 19

This is the structure of a .webm file.

To create one, we need to put information in the beginning of the file that we only know at the end of the process.

That is why videos with MediaRecorder() show no duration and why they are slow to seek when playing them back.

1

Jonny Burger @jonny.io · Mar 7

New API for running parseMedia() on Web Workers!

Keeps the main unblocked even for large files to reduce lag.

All the communication between main thread and worker is automatically handled, and it works exactly like parseMedia(). Bliss!

Jonny Burger @jonny.io · Mar 6

WebCodecs has no limits 🔫 🕶️

Just converted the full "Terminator" movie with Arnold Schwarzenegger from a sketchy .m3u8 URL to .mp4

4K, 107 minutes, 10GB file size, completely client side, it works!

Jonny Burger @jonny.io · Mar 6

Feels good to have finally done all the work to support all major video and audio formats!

Only one step away from stable release: Seeking support! Let's get it 👊

1

Jonny Burger @jonny.io · Mar 5

@⁠remotion/media-parser now supports parsing .m3u8 files! (HLS)

Jonny Burger @jonny.io · Mar 5

Excited that @TellaHQ is boosting the development of @⁠remotion/media-parser with $10.000!

They want to elevate their editor experience with WebCodecs and the Media Parser project is just what they need.

We gain a great partner to battletest our parser against 💪

2

Jonny Burger @jonny.io · Feb 28

Remotion Docs now feature an "Ask AI" button!

Use it to find the right command or API, or ask it to write you a Remotion component!

1

Jonny Burger @jonny.io · Feb 27

We now have a Remotion Starter that uses React Router 7! 🤩

I predict this is going to become a popular way to build apps!

www.remotion.dev/templates/re...

4

Jonny Burger @jonny.io · Feb 26

New in Remotion: You can now programmatically set a default output name, for example to include the current date

Suggested by @FernandoTheRojo!

1

Jonny Burger @jonny.io · Feb 25

New Remotion API: visualizeAudioWaveform()!

Allows for making great looking voice visualizations – very parametrizable as well!