Learning AVFoundation — Part 4 (Playback demo…)

Continued Part 3: https://medium.com/@divya.nayak/learning-avfoundation-part-3-playback-playing-assets-e11b6010d6c5

Let’s put into practical from all of the theory in the previous parts of the blog. First, let’s create a single view application project using swift and storyboards. I am just trying to do a sample for the demo which looks much more like iMovie apps playback. In this blog I am gonna tell you more on playback part and media timeline will be continued in the next blog.

Playback demo

The Player and its control

For understanding more on playback, please go though Part3 blog.

1. Let us create a MoviePlayerView which holds the visual part of the player.
2. MoviePlayerView. swift is a custom view class whose layer is used to show the visual part of the movie.
3. Make custom view’s layer as AVPlayerLayer. It holds the AVPlayer object which is player property of AVPlayerLayer itself.
4. Also, custom view’s layer should be of AVPlayerLayer class.

To be more precise,

MoviePlayerView.swift

Let me create a model to hold the asset and its properties if we need to add further in future.

1. Add Movie.swift and add a property of AVAsset, video URL.
2. Add a initialiser for the model which passes the movie URL and initialise the asset.

Let’s go back to the MoviePlayerView.swift

1. Add a Movie property, we will use to play the movie. When movie is set make the movie available for the player to get it to ready to play.
2. We can have a callback when player is ready to play, for that add playerDidBecomeReady closure property.
3. Override observeValue(keypath:) to track the status of the player when it is ready to play.
4. Add play, pause and seek(toTime:) controls for the player.

With these changes the MoviePlayerView.swift looks like,

MoviePlayerView.swift

Moving on to the user interface part. To play/pause let me create a custom button PlayerButton.swift which handles play/pause like a charm.

1. Create PlayerButton.swift and handle play/pause states through PlayerState enum.
2. Add a mutating tap() function to switch the states of play/pause for the PlayerState.
3. Understand the playerState and call play() or pause() methods based on the current state of the player and set button images accordingly.

More explanation on the code with the comments here:

PlayerButton.swift

Finally the ViewController.swift, which is simple.

1. Add a UIView in the main.storyboard and then set the view class as MoviePlayerView(custom view).
2. Drag an outlet into ViewController.swift, say playerView. Set the movie object to the player view.
3. Observe the callback playerDidBecomeReady for start playing the content.
4. Use the methods playerStateChanged(), seek(toSeconds:) to control the playback.
5. Let us learn seek(toSeconds:) later (in image generator), we we will work on play pause for now.

So the ViewController.swift looks much more like,

Feel free to check the sample code in git repo,

busybee18/AVFoundation

We shall learn more on video timeline with Image generator in the next blog.

Thank you!