Add custom controls to AVPlayer in swift

Question

I am trying to create a table view such that I am able to play videos . I am able to do this using AVPlayer and layer.

I want to add a custom play and pause button with a slider to the bottom of a video view.

AVPlayerController comes built in with these controls.

How can I implement these in AVPlayer. I have been looking for examples. But I haven't found any.

Are there any GitHub examples or code samples that I can follow? Any help will be really appreciated.

Did you have a look at Apple's Sample Code? https://developer.apple.com/library/content/samplecode/AVPlayerDemo/Introduction/Intro.html — Lepidopteron, Mar 28 '17 at 07:14

Anbu.Karthik · Accepted Answer · 2019-02-19T13:57:37.277

here I add the points , you need to customize based on your need.

Step-1

initially hide your AVPlayer controls,

 YourAVPlayerViewController.showsPlaybackControls = false

Step-2

create the structure like

one label for current Duration, One label for overall Duration, one UIbutton for pause and play your current player and one UISlider for seek The video.

step-3

initially close the simple steps.

first stop and play the player using button action , currentPlayer is your AVPlayer name.

@IBAction func handlePlayPauseButtonPressed(_ sender: UIButton) {
   //  sender.isSelected ?  currentPlayer.pause() :   currentPlayer.play()
    if sender.isSelected {
        currentPlayer.pause()
    }
    else {
        currentPlayer.play()
    }
}

second set the video duration, as like

    let duration : CMTime = currentPlayer.currentItem!.asset.duration
    let seconds : Float64 = CMTimeGetSeconds(duration)

    lblOverallDuration.text = self.stringFromTimeInterval(interval: seconds)

third set the player current time to current duration label

    let duration : CMTime = currentPlayer.currentTime()
    let seconds : Float64 = CMTimeGetSeconds(duration)

    lblcurrentText.text = self.stringFromTimeInterval(interval: seconds)

the following method is convert from NSTimeinterval to HH:MM:SS

func stringFromTimeInterval(interval: TimeInterval) -> String {

    let interval = Int(interval)
    let seconds = interval % 60
    let minutes = (interval / 60) % 60
    let hours = (interval / 3600)
    return String(format: "%02d:%02d:%02d", hours, minutes, seconds)
}

finally we go for slider control for calulate the seek time

_playheadSlider.addTarget(self, action: #selector(self.handlePlayheadSliderTouchBegin), for: .touchDown)
_playheadSlider.addTarget(self, action:    #selector(self.handlePlayheadSliderTouchEnd), for: .touchUpInside)
_playheadSlider.addTarget(self, action: #selector(self.handlePlayheadSliderTouchEnd), for: .touchUpOutside)
_playheadSlider.addTarget(self, action: #selector(self.handlePlayheadSliderValueChanged), for: .valueChanged)

lets we go for action, initially when touchbegin is start then stop the player

handlePlayheadSliderTouchBegin

@IBAction func handlePlayheadSliderTouchBegin(_ sender: UISlider) {
currentPlayer.pause()
}

set the current item label for calculate the sender.value * CMTimeGetSeconds(currentPlayer.currentItem.duration)

@IBAction func handlePlayheadSliderValueChanged(_ sender: UISlider) {

        let duration : CMTime = currentPlayer.currentItem!.asset.duration
     let seconds : Float64 = CMTimeGetSeconds(duration) * sender.value
 //   var newCurrentTime: TimeInterval = sender.value * CMTimeGetSeconds(currentPlayer.currentItem.duration)
lblcurrentText.text = self.stringFromTimeInterval(interval: seconds)
   }

finally move the player based on seek

 @IBAction func handlePlayheadSliderTouchEnd(_ sender: UISlider) {

  let duration : CMTime = currentPlayer.currentItem!.asset.duration
var newCurrentTime: TimeInterval = sender.value * CMTimeGetSeconds(duration)
var seekToTime: CMTime = CMTimeMakeWithSeconds(newCurrentTime, 600)
currentPlayer.seek(toTime: seekToTime)
}

@BhavinRamani - based on question I added the answer, if you need to go full screen, need to add one more button and inside the action use transform rotate — Anbu.Karthik, Aug 18 '17 at 09:02
@Anbu.karthik how do you add this custom view over avplayer? — Syed Ali Salman, Jan 16 '18 at 07:02
@SyedAliSalman - initally create one UIView (yourview addsubvew.avplayer) then add customview (yourview.addview.customview) — Anbu.Karthik, Jan 16 '18 at 07:05
Thanks. I was adding over AVPlayerController.view and it was not appearing right. — Syed Ali Salman, Jan 16 '18 at 07:44
@Anbu.Karthik, Thanks Your Great Answer!!. Can we add zoom on double tap or two fingers on player when "showsPlaybackControls = false" is false? — Mayank Palotra, Sep 11 '20 at 13:12
UISlider not updating on playing video, it's a bug so not complete answer. Kindly update answer accordingly — iPhone 7, Apr 08 '21 at 10:28

score 1 · Answer 2 · answered Dec 06 '20 at 00:27

In addition to Anbu.Karthik's answer, the slider handing can be handled better in a single function like below:

slider.addTarget(self, action: #selector(self.handlePlayheadSliderValueChanged(sender:event:)), for: .valueChanged)

Slider Value Change:

Note switch cases handling all phases of slider event

@objc func handlePlayheadSliderValueChanged(sender: UISlider, event: UIEvent) {
    if let duration: CMTime = player?.currentItem?.asset.duration {
        let newCurrentTime: Float64 = CMTimeGetSeconds(duration) * Double(sender.value)
        videoLengthLabel.text = self.stringFromTimeInterval(interval: newCurrentTime)
        if let touchEvent = event.allTouches?.first {
            switch (touchEvent.phase) {
            case .began:
                // on slider touch begin
                pauseVideo()
                break
            case .moved:
                // on slider movement
                let seekToTime: CMTime = CMTimeMakeWithSeconds(newCurrentTime, preferredTimescale: 600)
                player?.seek(to: seekToTime, completionHandler: { (completedSeek) in
                    // any additional operation upon seek completion
                })
                break
            case .ended:
                // on slider touch end (finger lift)
                playVideo()
                break
            default:
                break
            }
        }
    }
}

Add custom controls to AVPlayer in swift

2 Answers2

Linked