I actually tried out the web app 'Clip JS' that allows you to edit videos in your browser from your smartphone or PC for free, without ads or registration.



' ClipJS ' is a video editing web app built with ffmpeg.wasm, the WebAssembly version of

FFmpeg , Next.js , and Remotion , a video generation library for React. It is free and requires no registration, and can be used from a PC or smartphone browser.

ClipJS
https://clipjs.vercel.app/

This time, I tried accessing ClipJS from Google Chrome on my PC. To edit videos, click 'Get started.' You do not need to register as a user to use it, and it is free to use.



Click 'Add Project' to create a project.



Enter a project name and click Create.



Click on the created project.



The ClipJS UI is displayed. It is a free web app, but it does not display any advertisements.



Click 'Add Media' in the top left, select the video you want to load, and the video will appear below the button. ClipJS is web browser-driven, but all editing is done locally, so no footage is uploaded to a separate server.



Click the '+' to the left of the video file name to add the video material to the timeline.



The right column displays the video properties, allowing you to change the start and end points of the video material, its X and Y coordinates on the screen, its transparency, width, height, layer stacking order, and transparency.



The timeline has four rows, from the top to the bottom: video, music, image, and text. There is a concept of layers for videos and images, but they can only be set with Z-index and are not represented visually.



There is an operation panel in the upper left of the timeline. 'Split' cuts the video material at the preview playback position. 'Duplicate' copies the selected video material and pastes it to the lower layer, and 'Delete' deletes the selected video material.



'Text' in the upper left of the UI allows you to generate a text layer that will be used as subtitles. Enter the content you want to display in the 'Text Content' input field.



Select the start and end points, X and Y coordinates, font size, Z-index, and font color of the text layer, then click 'Add Text' to place the specified text layer in the text section of the timeline. The subtitles with the specified content will be displayed on the preview screen.



ClipJS only allows you to perform basic cut editing of videos and add text layers. You cannot set detailed effects or transitions. Once you're done editing, click 'Export' from the top left, specify the resolution, image quality, and processing speed, and click 'Render.'



The video export has started. This time, the resolution is set to 1080p, the image quality is set to High, and the process speed is set to Balanced. However, the rendering itself is done on the browser, so the time it takes to export depends on the specs of the PC you are using. Since it was a slightly old laptop, it took about 40 minutes to export a 46-second video. This is about 30 to 40 times longer than it would take to export using regular video editing software, which seems far from practical.



After the video has been exported, click 'Save Video' to save the exported video. When you actually look at the exported video, the Japanese text in the preview is garbled, so it seems that it does not support Japanese. ClipJS can be used not only on PCs but also on smartphones, but the rendering is quite slow, so at the time of writing this article, it did not seem like it would be useful for quickly editing videos taken on the spot.



The ClipJS source repository is available on GitHub.

GitHub - mohyware/clip-js: online video editor built with nextjs, remotion and ffmpeg (web assembly port) for render.
https://github.com/mohyware/clip-js

in Review,   Software,   Web Application, Posted by log1i_yk