Looking for
or
?
We've rebranded!
API Docs

Video Composition

Video Composition tool

The composition tool allows your users to compose multiple videos and trim individually the length of each or the whole video.

The VideoEditor SDK supports adding multiple video clips to the editor unifying them in a video composition. Inside the composition tool, the video clips can be trimmed and repositioned within the video composition itself. The composition tool is implemented in the VideoCompositionToolPanel class configured by UiConfigComposition

Furthermore, the VideoEditor SDK supports adding predefined video libraries from which video clips can be added to the video composition. The corresponding tool is implemented in the VideoLibraryToolPanel class configured by UiConfigVideoLibrary

For details on how to modify the style for both of the tools, take a look at the customization section.

Keep in mind that you need to have purchased the video composition feature to enable this feature.

Adding a video composition

To load a video composition containing multiple videos into the editor look at the following code example:

fun openEditor(inputVideo: Uri) {
    thread {
        val settingsList = createVESDKSettingsList()
        settingsList.configure<VideoCompositionSettings> {
            // Add chosen video
            it.addCompositionPart(VideoCompositionSettings.VideoPart(inputVideo))

            // Add a another video
            it.addCompositionPart(
                VideoCompositionSettings.VideoPart(videoUri1)
            )
            // Add another video, which is already trimmed from 3 until 10 seconds
            it.addCompositionPart(
                VideoCompositionSettings.VideoPart(
                    videoUri2,
                    trimStartInNanoseconds = 3.convert(TimeUnit.SECONDS, TimeUnit.NANOSECONDS),
                    trimEndInNanoseconds = 10.convert(TimeUnit.SECONDS, TimeUnit.NANOSECONDS)
                )
            )
        }
        // ATTENTION: You need to set a loading source the size and fps is taken from!
        settingsList.configure<LoadSettings> {
            // You could use a video or a empty composition source which is recommended.
            it.source = LoadSettings.compositionSource(
                width = 1024, height = 1920,
                framesPerSecond = 60
            )
        }

        // OPTIONAL: Set the entry point to VideoCompositionToolPanel
        settingsList.configure<UiConfigMainMenu> {
            it.setInitialTool(VideoCompositionToolPanel.TOOL_ID)
        }

        // Start the editor
        runOnUiThread {
            EditorBuilder(this)
                .setSettingsList(settingsList)
                .startActivityForResult(this, VESDK_RESULT)
        }
    }
}
private void openEditor(Uri inputVideo) {
    new Thread(() -> {
        VideoEditorSettingsList settingsList = ExampleConfigUtility.createInitialVESDKSettingsList();

        VideoCompositionSettings compositionSettings = settingsList.get(VideoCompositionSettings.class);
        // Add chosen video, starting at time 0 nanoseconds and ending at the full length (-1)
        compositionSettings.addCompositionPart(
          new VideoCompositionSettings.VideoPart(inputVideo, 0,-1)
        );

        // Add another video
        compositionSettings.addCompositionPart(
          new VideoCompositionSettings.VideoPart(videoUri1, 0, -1)
        );
        // Add another video, which is already trimmed from 3 until 10 seconds
        compositionSettings.addCompositionPart(
          new VideoCompositionSettings.VideoPart(
            videoUri2,
            TimeUnit.NANOSECONDS.convert(3, TimeUnit.SECONDS),
            TimeUnit.NANOSECONDS.convert(10, TimeUnit.SECONDS)
          )
        );

        // ATTENTION: You need to set a loading source the size and fps is taken from!
        settingsList.get(LoadSettings.class).setSource(LoadSettings.compositionSource(1024, 1920, 60));

        // OPTIONAL: Set the entry point to VideoCompositionToolPanel
        settingsList.get(UiConfigMainMenu.class).setInitialTool(VideoCompositionToolPanel.TOOL_ID);

        runOnUiThread(() -> {
            // Start the editor
            new VideoEditorBuilder(CompositionActivity.this)
              .setSettingsList(settingsList)
              .startActivityForResult(this, VESDK_RESULT);
        });
    }).start();
}

Adding an empty video composition

The VideoEditViewController can also be initialized with an empty composition that does not contain any videos. Therefore, the editor needs to have a valid composition size in which all added video clips will be fitted into:

fun openEmptyComposition() {
    thread {
        val settingsList = createVESDKSettingsList()

        settingsList.configure<LoadSettings> {
            it.source = LoadSettings.compositionSource(
                width = 1024, height = 1920,
                framesPerSecond = 60
            )
        }

        // RECOMMENDED: Set the entry point to VideoCompositionToolPanel
        settingsList.configure<UiConfigMainMenu> {
            it.setInitialTool(VideoCompositionToolPanel.TOOL_ID)
        }

        // Start the editor
        runOnUiThread {
            EditorBuilder(this)
                .setSettingsList(settingsList)
                .startActivityForResult(this, VESDK_RESULT)
        }
    }
}
public void openEmptyComposition() {
    new Thread(() -> {
        VideoEditorSettingsList settingsList = ExampleConfigUtility.createInitialVESDKSettingsList();

        settingsList.get(LoadSettings.class).setSource(
          LoadSettings.compositionSource(1024, 1920, 60)
        );

        // RECOMMENDED: Set the entry point to VideoCompositionToolPanel
        settingsList.get(UiConfigMainMenu.class).setInitialTool(VideoCompositionToolPanel.TOOL_ID);

        runOnUiThread(() -> {
            // Start the editor
            new VideoEditorBuilder(CompositionActivity.this)
              .setSettingsList(settingsList)
              .startActivityForResult(this, VESDK_RESULT);
        });
    }).start();
}

Adding video clips

Video clips are inserted into the SDK using the UiConfigVideoLibrary. The VideoClipItem class can handle local and remote resources although remote resources are not optimized and therefore should be downloaded in advance and then passed as a local resource.

settingsList.configure<UiConfigVideoLibrary> {
    it.setVideoClipLists(
        VideoClipAddItem(),
        VideoClipCategoryItem(
            "video_cat_something", "Some Videos",
            // Add Video from asset and use Video as thumbnail
            VideoClipItem(VideoSource.create(R.raw.test_video), ImageSource.create(VideoSource.create(R.raw.test_video))),
            // Add Video from local uri and use resource as thumbnail
            VideoClipItem(VideoSource.create(downloadedUri), ImageSource.create(R.drawable.pictogram)),
            // Add Video from external uri and use resource as thumbnail -> The thumbnail should be local
            VideoClipItem(VideoSource.create(Uri.parse("https://example.com/some/video.mp4")), ImageSource.create(R.drawable.pictogram)),
        )
    )
}
UiConfigVideoLibrary uiConfig = settingsList.get(UiConfigVideoLibrary.class);
uiConfig.setVideoClipLists(
    new VideoClipAddItem(),
    new VideoClipCategoryItem(
        "video_cat_something", "Some Videos",
        // Add Video from assets and use video as thumbnail
        new VideoClipItem(VideoSource.create(R.raw.test_video), ImageSource.create(VideoSource.create(R.raw.test_video))),
        // Add Video from local uri and use resource as thumbnail
        new VideoClipItem(VideoSource.create(someDownloadedUri), ImageSource.create(R.drawable.pictogram)),
        // Add Video from external uri and use resource as thumbnail -> The thumbnail should be local
        new VideoClipItem(VideoSource.create(Uri.parse("https://example.com/some/video.mp4")), ImageSource.create(R.drawable.pictogram))
    )
);