Skip to main content

Video Composition

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

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 CompositionToolController class and can be customized using the CompositionToolControllerOptions.

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 VideoClipToolController class and can be customized using the VideoClipToolControllerOptions.

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

Adding a video composition#

To load a video composition containing multiple videos into the editor, simply initialize a VideoEditViewController with a multi-asset Video object:

let videoClips = [
Bundle.main.url(forResource: "sun", withExtension: "mp4"),
Bundle.main.url(forResource: "lake", withExtension: "mp4"),
].compactMap { $0.map{ AVURLAsset(url: $0) } }
let video = Video(assets: videoClips)
let videoEditViewController = VideoEditViewController(videoAsset: video, configuration: Configuration())
present(videoEditViewController, animated: true, completion: nil)

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:

let video = Video(size: CGSize(width: 1080, height: 1080))
let videoEditViewController = VideoEditViewController(videoAsset: video, configuration: Configuration())
present(videoEditViewController, animated: true, completion: nil)

Adding video clips#

Before specifying your dedicated video libraries, you need to enable this feature within the configuration by setting the VideoClipToolControllerOptions.videoClipLibraryMode to VideoClipLibraryMode.predefined. By default, this is set to VideoClipLibraryMode.personal which only allows adding video clips from the camera roll. For details on the different modes, take a look at the VideoClipLibraryMode.

let configuration = Configuration { builder in
builder.configureCompositionToolController { options in
options.videoClipLibraryMode = .predefined
}
}

Video clips are inserted into the SDK using the static property VideoClipCategory.all, which is an array of VideoClipCategory objects. A VideoClipCategory object holds the metadata of a video clip category, such as its preview image or the title and has an array of VideoClip objects, which again hold the metadata for a VideoClip, such as its videoURL and thumbnailURL. The VideoClip 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.

let videoClips = [
Bundle.main.url(forResource: "sun", withExtension: "mp4"),
Bundle.main.url(forResource: "lake", withExtension: "mp4"),
Bundle.main.url(forResource: "woods", withExtension: "mp4"),
Bundle.main.url(forResource: "flowers", withExtension: "mp4"),
Bundle.main.url(forResource: "mountains", withExtension: "mp4")
].compactMap { $0.map { VideoClip(identifier: $0.path, videoURL: $0) }}
if let previewURL = Bundle.main.url(forResource: "nature-thumbnail", withExtension: "png") {
let category = VideoClipCategory(title: "Nature", imageURL: previewURL, videoClips: videoClips)
VideoClipCategory.all = [category]
}