blog

Help

introduction

videoinu is an online video-editor that does everything using your browser. That means that you're able to use the editor even when offline, and none of the videos you create or the assets you use will be sent to our servers. Whether that's a business requirement or just a nice-to-know fact is up to you.

Being a web-only editor makes videoinu not suitable for all purposes. Here's a handy checklist of projects videoinu is good (✅), okay (🆗), or not very good (❌) at:

crawl

getting started

When you open the editor this is what you should see:

User interface of videoinu crawl

common operations

Short reference of common operations.
operation how to
undo ctrl - z
redo ctrl - shift - z
resize layer on canvas mouse wheel
duplicate layer copy and paste (ctrl - c and ctrl - v)
remove layer select layer and delete / backspace
remove keyframe right click keyframe icon
split layer select layer and split button or s
crawl

viewport

You can think of viewport as the camera frame. That is to say, everything inside the viewport will be visible in the final video, and everything outside will not.

In videoinu, the edit view (on the left side) will always show the whole editing area, including areas outside the viewport. The preview view (on the right side) will only show you the inside of the viewport, which is what the final video will look like.

editing the viewport

The viewport is represented by a red rectangle in the edit view. You can freely move, resize, and otherwise transform the viewport as long as you have selected viewport on the layer timeline.

animating the viewport

If you want to focus specific parts of the source video in your video, animating the viewport is an excellent way to achieve this. Viewport's keyframes use the same system as layer keyframes, so animating the viewport is done the same way as animating a layer.

crawl

keyframes

Keyframes are the building block of animations and transitions. If nothing in your project moves, fades in/out, or is animated in some other way you can probably ignore the feature.

However, if you need the viewer to focus on something specific or you want to make the video more interesting with transitions/animations, keyframes are the tool to use. Keyframes work by automatically animating properties (like position or color) between two keyframes.

Animating layers with keyframes is easy. Set the cursor to position where you want the layer to be moved at, click "insert keyframe" to add a new keyframe to the current layer at the current time, and then move the layer to the new position.

You can also turn on "automatic keyframes" to create keyframes automatically when you move a layer. Remember that using keyframes results in smooth animation between frames. Therefore, if you want to move layer from position A to B almost instantly, you need two keyframes next to each other.

crawl

keyframe easing

Keyframe easing allows controlling what the transition between two keyframes will look like. Keyframe easing options are editable in layer properties when the timeline cursor is over a keyframe.

Note that setting a keyframe's transition affects the period between the previous and the current keyframe. Therefore, changing the easing of the chronologically first keyframe of a layer will have no effect.

Currently supported easing options:

crawl

trimming

Trimming changes the starting or ending time of the video. It can be used to for example create a trailer from a longer video.

mark start sets the start time for the video and mark end sets the end time.

crawl

output video specification

Videos created with videoinu will follow these specifications:

will the video work in Facebook/Instagram/Twitter/Youtube?

Rendered video's specific used encoding and technical composition will depend on the browser used. Therefore, it's not possible to give a definite answer. As a rule of thumb, Youtube will accept whatever video is thrown its way, but with other services your mileage may vary.

how does rendering work behind the scenes?

Rendering uses browser's built-in MediaRecorder API to convert your project into video. This means that the whole rendering process happens in the browser and nothing will be sent to us for processing. It also means that the rendering process will not always work as smoothly, quickly, or fault-freely as some offline-editors might. If you have any issues, please reach out to us (check feedback section for how).

crawl

feedback

If you have any feedback, feature ideas, suggestions, or anything else, the best way to reach us at the moment is on Twitter.

crawl