Video Composition
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 videoit.addCompositionPart(VideoCompositionSettings.VideoPart(inputVideo))// Add a another videoit.addCompositionPart(VideoCompositionSettings.VideoPart(videoUri1))// Add another video, which is already trimmed from 3 until 10 secondsit.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 VideoCompositionToolPanelsettingsList.configure<UiConfigMainMenu> {it.setInitialTool(VideoCompositionToolPanel.TOOL_ID)}// Start the editorrunOnUiThread {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 VideoCompositionToolPanelsettingsList.configure<UiConfigMainMenu> {it.setInitialTool(VideoCompositionToolPanel.TOOL_ID)}// Start the editorrunOnUiThread {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 thumbnailVideoClipItem(VideoSource.create(R.raw.test_video), ImageSource.create(VideoSource.create(R.raw.test_video))),// Add Video from local uri and use resource as thumbnailVideoClipItem(VideoSource.create(downloadedUri), ImageSource.create(R.drawable.pictogram)),// Add Video from external uri and use resource as thumbnail -> The thumbnail should be localVideoClipItem(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.