当前位置：首页 > news >正文

SwiftUI + AVFoundation实战：5步封装一个可复用的视频播放控制组件

news 2026/5/1 22:20:32

SwiftUI + AVFoundation实战：5步封装现代化视频播放控制组件

在iOS开发生态中，SwiftUI的声明式语法与AVFoundation的强大媒体处理能力结合，正在重塑视频播放组件的开发范式。传统基于UIKit的播放器控件需要手动管理视图状态与播放逻辑的同步，而SwiftUI的数据驱动特性让我们能够构建更简洁、更易维护的播放控制组件。本文将带你从零开始，用五个关键步骤实现一个具备完整播放控制功能的现代化组件。

1. 构建播放器核心状态机

任何视频播放器的核心都是状态管理。在SwiftUI中，我们可以用@State和ObservableObject构建响应式状态机：

class VideoPlayerViewModel: ObservableObject { @Published var player: AVPlayer? @Published var isPlaying = false @Published var currentTime: CMTime = .zero @Published var duration: CMTime = .zero @Published var isSeeking = false private var timeObserverToken: Any? init(url: URL) { self.player = AVPlayer(url: url) setupPeriodicTimeObserver() } private func setupPeriodicTimeObserver() { let interval = CMTime(seconds: 0.5, preferredTimescale: CMTimeScale(NSEC_PER_SEC)) timeObserverToken = player?.addPeriodicTimeObserver( forInterval: interval, queue: .main) { [weak self] time in guard !(self?.isSeeking ?? true) else { return } self?.currentTime = time } } func togglePlayback() { isPlaying ? player?.pause() : player?.play() isPlaying.toggle() } func seek(to time: CMTime) { isSeeking = true player?.seek(to: time) { [weak self] _ in self?.isSeeking = false } } deinit { if let token = timeObserverToken { player?.removeTimeObserver(token) } } }

关键设计要点：

使用@Published属性包装器自动触发UI更新
通过addPeriodicTimeObserver实现播放进度同步
独立的isSeeking状态防止拖动进度条时的UI闪烁
自动清理时间观察者避免内存泄漏

2. 实现CMTime到字符串的视图修饰符

AVFoundation使用CMTime表示时间，但UI需要显示格式化的字符串。我们可以创建可复用的视图修饰符：

struct TimeDisplayModifier: ViewModifier { let time: CMTime let isDuration: Bool func body(content: Content) -> some View { content .overlay( Text(formattedTime) .font(.system(size: 12, design: .monospaced)) .foregroundColor(.white) .padding(4) .background(Color.black.opacity(0.5)) .cornerRadius(4), alignment: .trailing ) } private var formattedTime: String { let totalSeconds = time.seconds guard !totalSeconds.isNaN else { return isDuration ? "--:--:--" : "00:00:00" } let hours = Int(totalSeconds) / 3600 let minutes = Int(totalSeconds) / 60 % 60 let seconds = Int(totalSeconds) % 60 return String(format: "%02d:%02d:%02d", hours, minutes, seconds) } } extension View { func timeDisplay(_ time: CMTime, isDuration: Bool = false) -> some View { self.modifier(TimeDisplayModifier(time: time, isDuration: isDuration)) } }

使用示例：

Text("Duration:") .timeDisplay(viewModel.duration, isDuration: true)

3. 设计声明式播放控制界面

结合SwiftUI的声明式语法，我们可以构建高度可定制的控制界面：

struct VideoPlayerControlsView: View { @ObservedObject var viewModel: VideoPlayerViewModel @State private var sliderValue: Double = 0 var body: some View { VStack { Spacer() // 顶部控制栏 HStack { Button(action: { /* 返回操作 */ }) { Image(systemName: "chevron.backward") .padding() } Spacer() Text("视频标题") .font(.headline) } .padding() // 底部控制栏 HStack(spacing: 16) { // 播放/暂停按钮 Button(action: viewModel.togglePlayback) { Image(systemName: viewModel.isPlaying ? "pause.fill" : "play.fill") .frame(width: 40, height: 40) } // 当前时间 Text("") .timeDisplay(viewModel.currentTime) .frame(width: 80, alignment: .leading) // 进度条 Slider( value: $sliderValue, in: 0...1, onEditingChanged: { editing in if editing { viewModel.isSeeking = true } else { let targetTime = CMTimeMultiplyByFloat64( viewModel.duration, multiplier: Float64(sliderValue) ) viewModel.seek(to: targetTime) } } ) .accentColor(.white) .onChange(of: viewModel.currentTime) { newValue in guard !viewModel.isSeeking else { return } sliderValue = newTime.seconds / viewModel.duration.seconds } // 总时长 Text("") .timeDisplay(viewModel.duration, isDuration: true) .frame(width: 80, alignment: .trailing) } .padding() } .foregroundColor(.white) .background( LinearGradient( gradient: Gradient(colors: [.clear, .black.opacity(0.7)]), startPoint: .top, endPoint: .bottom ) ) } }

界面特点：

使用Slider与CMTime的无缝转换
通过onChange修饰符实现状态同步
渐变色背景提升控制栏可读性
完全适配Dark Mode和动态类型

4. 集成AVPlayerLayer与SwiftUI

要在SwiftUI中使用AVFoundation的渲染层，需要桥接UIKit的AVPlayerLayer：

struct AVPlayerView: UIViewRepresentable { let player: AVPlayer? func makeUIView(context: Context) -> UIView { let view = UIView() let playerLayer = AVPlayerLayer() playerLayer.player = player playerLayer.videoGravity = .resizeAspect view.layer.addSublayer(playerLayer) return view } func updateUIView(_ uiView: UIView, context: Context) { guard let layer = uiView.layer.sublayers?.first as? AVPlayerLayer else { return } layer.frame = uiView.bounds layer.player = player } }

完整播放器集成示例：

struct VideoPlayerView: View { let url: URL @StateObject private var viewModel: VideoPlayerViewModel init(url: URL) { self.url = url _viewModel = StateObject(wrappedValue: VideoPlayerViewModel(url: url)) } var body: some View { ZStack { AVPlayerView(player: viewModel.player) .edgesIgnoringSafeArea(.all) VideoPlayerControlsView(viewModel: viewModel) } .onAppear { viewModel.player?.play() viewModel.isPlaying = true } .onDisappear { viewModel.player?.pause() } } }

5. 高级功能扩展与优化

基础功能完成后，我们可以添加专业级播放器功能：

缓冲进度指示器

extension VideoPlayerViewModel { @Published var bufferedRanges: [CMTimeRange] = [] private func setupBufferingObserver() { player?.currentItem?.addObserver( self, forKeyPath: #keyPath(AVPlayerItem.loadedTimeRanges), options: .new, context: nil ) } override func observeValue( forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer? ) { guard keyPath == #keyPath(AVPlayerItem.loadedTimeRanges), let item = player?.currentItem else { return } bufferedRanges = item.loadedTimeRanges.map { $0.timeRangeValue } } }

手势控制实现

struct VideoGestureModifier: ViewModifier { @ObservedObject var viewModel: VideoPlayerViewModel @State private var isShowingControls = true func body(content: Content) -> some View { content .contentShape(Rectangle()) .onTapGesture(count: 2) { _ in // 双击快进/快退 let delta = viewModel.isPlaying ? 10.0 : -10.0 let newTime = CMTimeAdd( viewModel.currentTime, CMTime(seconds: delta, preferredTimescale: 600) ) viewModel.seek(to: newTime) } .onTapGesture { _ in // 单击显示/隐藏控制栏 withAnimation(.easeInOut(duration: 0.3)) { isShowingControls.toggle() } } .gesture( DragGesture() .onEnded { value in // 水平滑动调节进度 let delta = value.translation.width let screenWidth = UIScreen.main.bounds.width let seconds = Double(delta / screenWidth) * 30 // 30秒滑动范围 let newTime = CMTimeAdd( viewModel.currentTime, CMTime(seconds: seconds, preferredTimescale: 600) ) viewModel.seek(to: newTime) } ) } }

性能优化技巧

时间观察者优化：

// 在后台时降低时间更新频率 .onReceive(NotificationCenter.default.publisher(for: UIApplication.willResignActiveNotification)) { _ in viewModel.updateTimeInterval = 2.0 } .onReceive(NotificationCenter.default.publisher(for: UIApplication.didBecomeActiveNotification)) { _ in viewModel.updateTimeInterval = 0.5 }

内存管理检查表：

移除所有KVO观察者
取消所有通知订阅
清空AVPlayerItem的asset
将AVPlayer的rate设置为0

预加载策略：

let preferredPeakBitRate: Double let preferredForwardBufferDuration: TimeInterval func configurePlayerItem(_ item: AVPlayerItem) { item.preferredPeakBitRate = preferredPeakBitRate item.preferredForwardBufferDuration = preferredForwardBufferDuration item.canUseNetworkResourcesForLiveStreamingWhilePaused = true }

通过这五个步骤，我们构建了一个符合现代SwiftUI设计理念的视频播放控制组件。相比传统UIKit实现，这种方案具有以下优势：