Mar 10
Video Player in IOS (Swift)
Hi guys, in this blog you will learn how to play a video by using a URL in IOS Swift. You will also learn how to show the loader when video buffering and show video on full screen. Let’s get started.
Step-1
Create a brand new XCode project and select the language Swift and Storyboard interface and follow along with the tutorial.
Step-2
Now first go to the Main storyboard and create some views in the storyboard. First, drag and drop the UIView in the storyboard and give it margins 0 to all sides from the super view. That UIView will be for the video. You can use the main UIView for video as well.
After that create a button and give it margins 0 to all sides from the Main view and give it an empty string as text. This button will not visible on the screen because this will be used to pause the video.
After that create a Play Button and give it 60 Width and Height and center align it in the middle of the screen. This button will play the screen when video will be pause.
Add an activity indicator in the middle of the screen which will indicate that the video is loading.
After that create the IBOutlets for all views in ViewController like below.
Now Import AVKit and AVFoundation. and then create AVPlayer optional instance. C
Create a setupView function in which we will do initial view setup like giving a corner radius to playButton and initially playButton will be hidden like that stuff and call that function in viewDidLoad function.
Step-3
Create a playButton function. Create videoUrl by using the static video url then initialize the player instance and give it videoUrl. Now create AVPlayerLayer which will add to the videoView as a layer and will show the AVPlayer. If you need to show the video to complete give view then you should give the videoGravity to AVPlayerLayer .resizeAspectFill, which will spread the video to complete the given view. Here we show the video in videoView and videoView is spread to the complete screen and the video will show to the complete screen also. Finally, play the video by using the player?.play() and call that function in viewDidLoad and run the project.
After that, you will see your video will run on the complete screen after loading but right now our button's appearance and loader appearance are not handled.
Step-4
Now, addObserver on the player forKeyPath “timeControlStatus” in playVideo function like below. This will give use the status of the video and on that bases, we can show or hide the loader.
Now, observe the “timeControlStatus” by overriding the observeValue method. This will give the old and new status of the video from time to time and then we will compare newStatus with oldStatus, if newStatus is not equal to the oldStatus that means something changed. If newStatus is equal to the .playing or .paused then activityIndicator will hide otherwise will show.
Now run the project you will see the first loader will show when the video is not loaded and playing, after some time when the video starts playing the loader will hide.
By using the observer we achieved that behavior.
Step-5
Create an extension of AVPlayer which will tell us whether the video is playing or not.
Now, create IBAction for playButton and pauseButton. When video is playing then the pauseButton will show on the screen and click on that button video will pause and then from playButton video will play and vice versa.
Run the project and you will screen the playing video with pause and play functionality like below.
Hope you understand this. Thanks for reading.
