HTML5 Video Editor release

HTML5 Video Editor is the professional online video editing tool that can be embedded in your Media Asset Management System (MAM), Learning Management System (LMS), Newsroom or in Healthcare system.

The editor can work both in the cloud and on premise, as it integrates with existing systems.

What is especially significant, when editing the smart rendering technology is used.

It means your users no longer have to worry about the image quality of the resulting video, as it will remain the same as it was in the original file.

Since this editor is online, it is fast and efficient and, due to smart rendering technology used, reduces energy consumption and pollution of the planet, which has a beneficial effect on the carbon footprint.

If your customers want to cut and join one or several files, add audio to the video file, add pictures or transitions between video segments, add text overlay – this all is possible with HTML5 Video Editor.

We had been working hard on the editor and are happy to announce the official release of HTML5 Video Editor. Let’s tell you about some new interesting features.

Version 1.2

Features list

• Files supported – MP4(AVC), MP3, M4A(AAC), JPG, PNG.
• Files ingest – local import, import from url, Dropbox and Google drive import, Amazon S3 Bucket (copying files)
• Cut, join, rearrange (pieces on timeline)
• Text and images over video. PNG (with transparency)
• Smart reencoding (files can be of different parameters)
• Transitions
• Audio overlay
• Undo / redo
• Folders
• Projects
• Timeline zoom
• Support of MXF XAVC with pre-existed proxy files (demo mode)
• Audio library

Under development now:

• Support of XDCAM MXF
• Ingest of XAVC/XDCAM (proxy building)
• Voice over
• Shapes annotation

Files ingest to the Media section

The files importing or uploading to the Media section of the editor can be done by several ways:

a) Local import – upload media from your computer

Following options available:

The first one: click on the “upload media” of “Drag and drop your media here or upload media” inscription to add one or several files to the Media list. You can add a video, audio file or a picture.

Please note that currently supported file formats are MP4(AVC) for video, MP3 and M4A(AAC) for audio, JPG and PNG for pictures.

Alternatively, click on the “Import” / “Import media” and select the file from your computer in the opened dialog box.

b) Drag and drop the file

Open the folder with your file and move it to the “Drag and drop your media here or upload media” area of Media. The upload will start right away, please wait until it is completed. Now it is possible to add the media to the area with layers.

c) Importing from URL

HTML5 Video Editor allows you to import the video file from any link, such as a Youtube link.

Select “Import” / “Import URL” and paste your link in the opened window.

d) Importing from Dropbox and Google drive

Use this option if you want to import the file from your Dropbox or Google drive account.

You’ll need to sign in to your account to enter these services and select the file to import.

e) Amazon S3 Bucket (copying files)

It is possible to copy the files to Media list from Amazon S3 Bucket.

Amazon S3 Bucket is a cloud file storage for developers. The access to files there is carried out by means of API.

Bucket name, Secret key and Access Key ID are used to control access to files.

For convenience, when there are a large number of files uploaded to Media, we have also added a search bar and filters to sort files into categories (video, audio files, pictures).

Video cut, join feature, rearrange of pieces of files, smart reencoding 

The editor allows you to cut video and audio files and preview the changes right away – delete unnecessary segments and save the rest.

If you want, you can also join multiple clips into a single file. Just place several clips one by one on the layer of the timeline and click the “Publish” button to merge them.

The rearrange of pieces of files at the timeline is also available.

While cutting or merging the smart reencoding is used. It means that used files for cutting or merging can be of different parameters.

Transitions

To make your videos more attractive, we have added the ability to add different transitions between multiple videos or their parts.

Currently available transitions are: Fade In, Fade Out and Dissolve.

To add the transition to video select the “Transitions” section on the left of the editor, grab the required transition with the left mouse button and drop it into the necessary position –  between two files /  segments of a file, at the beginning or end of the specific file.

You can also adjust your transition. For this select the transition on the layer, it will be highlighted with the blue color, and click the “Settings” button as shown at the screenshot below.

Text and graphics overlay 

If you want to add the header, annotations or any text to your video file you can do this with HTML5 Video Editor.

Just select the “Text” tab on the left side of the editor, drag and drop the “Text” template to the timeline area and select the properties for your text: enter the text itself, select its position, color, size and other properties.

You can also overlay an image on the video. For this, upload your image to the Media list, then drag it with your mouse and put in the timeline area.

Note: the picture should be placed at the layer above the video, not under it.

You can set properties for your image as well. After you put the video to the timeline area’s layer, click on the image at the Preview area and you’ll see available image options at the Media area. The settings that can be changed include size, position, rotation, opacity and other. The PNG files with transparency are also supported.

Audio overlay

Adding an audio file over a video is one of the most popular tasks.

• place the video file to the layer
• select the audio file from the Media list
• place it at the layer under your video file
• click the “Publish” button to get the desired output file.

Moving Layers

If necessary, you can rearrange the layer moving them up or down within the timeline.

Simply use “Move Up” and “Move Down” buttons to control the layers position.

Undo/redo actions

Use the Undo or Redo keys located on the left side of the editor to cancel the last action or repeat canceled actions.

Saving projects

When you work with HTML5 Video Editor you can save your progress in the project. The project is created automatically. The list of projects is available in the “Projects” tab.

Here you can rename the project, delete or copy it.

To start a new project click the “New project” button.

Please note, that all your changes will be applied to the current project, unless you start a new project clicking the “New project” button.

Timeline zoom feature

You can change the scale of the timeline using the zoom control.

Folders

HTML5 Video Editor allows to create folders to group files.

Click the “Add folder” button to add the new folder to the Media list.

Select the needed file and move it to the created folder.

Support of MXF XAVC with pre-existed proxy files (demo mode)

MXF files are quite large and difficult to work with, and online are completely impossible to work with because the browser does not support them natively. Proxy file is a pre-encoded file with lower resolution that solves this problem. The feature is supported in demo mode.

Audio library

HTML5 Video Editor contains the audio library that allows to add music to your video. The music is grouped by genre and by mood, so you can select the best appropriate track for you.

You can also add some sound effects to your video.

Visit the home page of the editor at the link:

https://www.solveigmm.com/en/products/html5-cloud-video-editing/