Skip to main content
VESDK/Android/Features

Video Composition

The VideoEditor SDK supports composing multiple videos. Learn how to create a composition and how to add custom video clips.

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)
        }
    }
}

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)
        }
    }
}

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)),
        )
    )
}

How to enforce a minimum or maximum video length#

Please see the trim feature page.