AVFoundation Tutorial: Adding Overlays and Animations to Videos | raywenderlich.com

🎓 Courses & Articles
1

In this AVFoundation tutorial, you’ll learn how to add overlays and animations to videos, by using the AVVideoCompositionCoreAnimationTool, which allows you to combine CALayers with videos to add backgrounds and overlays.

This is a companion discussion topic for the original entry at https://www.raywenderlich.com/6236502-avfoundation-tutorial-adding-overlays-and-animations-to-videos
2 Likes
2

Great tutorial! Would love to see more of these with AVFoundation. For example, adding audio, custom transitions, etc.

3

@dankerbel Thank you for your suggestion - much appreciated! I will forward it to the tutorial team.

4

Hey, can we we add overlay which is a video to overlayer layer

5

@marinbenc That’s an amazing article - to the point and does what it says, although there are a few things which you could also mention like accessing framerate/bitrate, Codec (although it is h264) a little explanation about them and then how to also make sure to have minimum loss while setting the AVAssetExportPreset Quality, what are the difference and what should one use to ensure least size and maximum quality at the same time.

But in all I found this article to be really amazing and very well structured

1 Like
6

Maybe to update for SwiftUI?

1 Like
7

@gowthamko Do you still have issues with this?

8

I didn’t figured out a way to do this. In tutorial you showed how to add overlay to a video. what i am trying to achieve here is, i have an overlay (which is a video) should be on top of other video.
Right now i am adding image as overlay layer.

        let parentLayer = self.createLayer()
        let videoLayer = self.createLayer()
        parentLayer.addSublayer(videoLayer)
        parentLayer.addSublayer(self.titleLayer)
		parentLayer.addSublayer(self.addImageOverlay())
        self.videoComposition.animationTool  =AVVideoCompositionCoreAnimationTool.init(postProcessingAsVideoLayer: videoLayer, in: parentLayer)
    
         let session  = AVAssetExportSession.init(asset: self.composition, presetName: AVAssetExportPreset1280x720)
         session?.audioMix = self.audioMix
         self.videoComposition.renderSize = CGSize.init(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
         session?.videoComposition = self.videoComposition


          func addImageOverlay () -> CALayer {
	       let overlayLayer = self.createLayer()
	       let overlayImage : UIImage = UIImage(named: "sticker")!
	       overlayLayer.contents = overlayImage.cgImage
	       overlayLayer.frame = CGRect(x: 0, y: UIScreen.main.bounds.height - 120 , width: 100, height: 100)
	       overlayLayer.masksToBounds = true
	        return overlayLayer;
}

Now in place of image i want to add video, how can we do it?

9

Thank you million!!! from south.korea have a good day!!

11

@richpark Really glad you like it! Cheers! :]

12

This tutorial is more than six months old so questions are no longer supported at the moment for it. Thank you!