Today’s Goal

  • Learn LBTA Youtube ep 19
    • AVPlayer - using local media
    • UIView - Gradients
    • UISlider - tracking

LBTA Youtube ep 19

How to Track Progress of AVPlayer and Bonus Gradients

슬라이더 속성과 그래디언트를 줘보자

AVPlayer local 접근

튜토리얼에서 사용하는 링크가 재생이 안되는 이슈가 발생해 로컬에 있는 동영상을 사용하기로 했다.

먼저 video file을 Xcode에 가져온 후에 작업해준다.

private func setupPlayerView() {
        guard let path = Bundle.main.path(forResource: "video", ofType: "mp4") else {
            debugPrint("video.mp4 not found")
            return
        }
        
        let url = URL(fileURLWithPath: path)
        player = AVPlayer(url: url)
            
        ...
    }

Gradient

private func setupGradientLayer() {
        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = bounds
        gradientLayer.colors = [UIColor.clear.cgColor, UIColor.black.cgColor]
        gradientLayer.locations = [0.7, 1.1]
        controlsContainerView.layer.addSublayer(gradientLayer)
    }

init()에서 실행 시켜줄 함수 CAGradientLayer()를 사용하여 GradientLayer를 만든다.

color들은 array에 넣어주고 location을 지정해주어야한다. 0 ~ 1이 비율로 height로 들어간다.

기본이 vertical로 설정이 되는데, 각도로 설정한다.

gradientLayer.transform = CATransform3DMakeRotation(CGFloat.pi / 2, 0, 0, 1)

pi / 2 = 90도 기울어서 horizontal로 보인다.

공식 문서 : https://developer.apple.com/documentation/quartzcore/cagradientlayer

location이 동일하면 그 부분부터 gradient가 아닌 그냥 색으로 나온다.

UISlider

재생 시 currentTime과 UISlider의 thumb이 이동해야한다.

player?.addPeriodicTimeObserver(forInterval: interval, queue: DispatchQueue.main, using: { (progressTime) in
            
            let seconds = CMTimeGetSeconds(progressTime)
            let secondsString = String(format: "%02d", Int(seconds) % 60)
            let minutesString = String(format: "%02d", Int(seconds) / 60)
            
            self.currentTimeLabel.text = "\(minutesString):\(secondsString)"
            
            // lets move the slider thumb
            if let duration = self.player?.currentItem?.duration {
                let durationSeconds = CMTimeGetSeconds(duration)
                
                self.videoSlider.value = Float(seconds / durationSeconds)
            }
            
        })

addPeriodicTimeObserver() 함수를 호출,

함수에 대한 설명 : Requests the periodic invocation of a given block during playback to report changing time.

여기서 이전에 전체 비디오 길이 label을 observer에서 바꿔준 것 처럼 currentTimeLabel을 바꿔준다. observer를 통해 시간이 바뀔 때마다 호출되는 듯 하다.

AVPlayer에서는 observer가 핵심인 것 같다.

self.videoSlider.value = Float(seconds / durationSeconds)

여기서 videoSlider의 value 값을 현재 초 / 전체 초로 변경해주면서 UISlider의 thumb도 동시에 움직이게 해줄 수 있다.

태그:

카테고리:

업데이트:

댓글남기기