[ios] 미디어 파일의 재생 중 슬라이더 및 타임라인 표시

14 Dec 2023

iOS 앱에서 미디어 파일을 재생하는 중에 사용자에게 시간을 표시하고 재생 위치를 조절할 수 있는 슬라이더와 타임라인이 표시되면 사용자 경험이 향상됩니다. 이를 위해 AVFoundation 및 UIKit 프레임워크를 사용하여 타임라인을 구현할 수 있습니다.

AVPlayer와 Slider

AVPlayer를 사용하여 미디어 파일을 재생하고, UISlider를 사용하여 타임라인을 표시할 수 있습니다.

import UIKit
import AVFoundation

class ViewController: UIViewController {
    
    @IBOutlet weak var playerView: UIView!
    @IBOutlet weak var slider: UISlider!
    
    var player: AVPlayer!
    var playerLayer: AVPlayerLayer!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        guard let url = URL(string: "your_media_file_url_here") else { return }
        player = AVPlayer(url: url)
        
        playerLayer = AVPlayerLayer(player: player)
        playerView.layer.addSublayer(playerLayer)
        
        player.addPeriodicTimeObserver(forInterval: CMTimeMake(value: 1, timescale: 1), queue: DispatchQueue.main) { [weak self] time in
            let currentTime = CMTimeGetSeconds(time)
            let duration = CMTimeGetSeconds(self?.player.currentItem?.duration ?? CMTime())
            self?.updateSlider(currentTime: currentTime, duration: duration)
        }
    }
    
    func updateSlider(currentTime: Float64, duration: Float64) {
        slider.value = Float(currentTime / duration)
    }
    
    @IBAction func sliderValueChanged(_ sender: UISlider) {
        if let duration = player.currentItem?.duration {
            let currentTime = Float64(slider.value) * CMTimeGetSeconds(duration)
            let time = CMTime(seconds: currentTime, preferredTimescale: 1)
            player.seek(to: time)
        }
    }
}

위 코드에서 sliderValueChanged 메서드는 슬라이더 값이 변경될 때 호출되며, 이를 통해 플레이어의 현재 위치를 조정합니다.

타임라인 그리기

타임라인을 시각적으로 표시하려면 AVPlayer의 현재 시간을 사용하여 사용자 정의 뷰나 프로그레스 바에 렌더링할 수 있습니다.

class TimelineView: UIView {
    
    var progress: Float = 0 {
        didSet {
            setNeedsDisplay()
        }
    }
    
    override func draw(_ rect: CGRect) {
        super.draw(rect)
        
        // Draw timeline using the progress value
    }
}

TimelineView 클래스는 타임라인을 표시하기 위한 사용자 정의 뷰이며, progress 속성의 값에 따라 타임라인을 그리고 다시 그립니다.

위의 예제를 참고하여 AVFoundation 및 UIKit을 사용하여 iOS 앱에서 미디어 파일의 재생 중 슬라이더와 타임라인을 표시할 수 있습니다. 사용자가 미디어 파일을 효과적으로 탐색할 수 있도록 시간을 시각적으로 표현함으로써 앱의 사용성을 향상시킬 수 있습니다.

AVPlayer와 Slider

타임라인 그리기

참고 자료