Swift Academy · 课时

在 SwiftUI 中嵌入播放器

Q: 「在 SwiftUI 中嵌入播放器」这节课中我会学到什么？

使用 VideoPlayer 和自定义播放器视图。 你通过在浏览器中直接运行的动手代码来练习 Swift Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 VideoPlayer 和自定义播放器视图。

第 4 / 4 课13 个步骤

在 SwiftUI 中嵌入播放器 是 CoddyKit 上的免费 Swift Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Swift Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Swift Academy 课程共包含 4 节课。

SwiftUI 中的视频

SwiftUI 提供了 VideoPlayer 视图（来自 AVKit），用于以声明式方式嵌入媒体播放，并内置播放控件。

import SwiftUI
import AVKit

VideoPlayer 视图

VideoPlayer 接收一个 AVPlayer，并使用标准传输控件进行渲染，包括播放、暂停、进度条和全屏。

struct PlayerScreen: View {
    let player = AVPlayer(url: URL(string: "https://example.com/v.mp4")!)
    var body: some View {
        VideoPlayer(player: player)
            .frame(height: 240)
    }
}

在状态中保存播放器

将 AVPlayer 存储在 @State 中，使其能够在视图更新后继续存在。如果每次调用 body 都重新创建它，播放就会重新开始。

struct PlayerScreen: View {
    @State private var player = AVPlayer(
        url: URL(string: "https://example.com/v.mp4")!)
    var body: some View {
        VideoPlayer(player: player)
    }
}

控制播放

通过 SwiftUI 的生命周期修饰符控制播放：视图出现时开始播放，视图消失时暂停播放，从而避免音频在屏幕外继续播放。

VideoPlayer(player: player)
    .onAppear { player.play() }
    .onDisappear { player.pause() }

叠加内容

VideoPlayer 初始化器接受一个叠加层闭包，用于在视频上方添加自定义界面，例如标题、徽章和字幕。

VideoPlayer(player: player) {
    VStack {
        Spacer()
        Text("Live")
            .padding(6)
            .background(.red, in: Capsule())
    }
}

循环播放

观察 item 结束通知并跳转回零，即可实现循环播放。使用带队列播放器的 AVPlayerLooper 也是一种选择。

.onAppear {
    NotificationCenter.default.addObserver(
        forName: .AVPlayerItemDidPlayToEndTime,
        object: player.currentItem, queue: .main) { _ in
        player.seek(to: .zero); player.play()
    }
}

用于视频的音频会话

配置 AVAudioSession，即可正确控制视频音频的行为，例如按需遵循静音开关，或在静音开关打开时仍然播放。

try? AVAudioSession.sharedInstance().setCategory(.playback)

使用 UIViewRepresentable 创建自定义播放器

当您需要完全自定义的界面（不使用系统控件）时，可以将 AVPlayerLayer 包装在 UIViewRepresentable 中，而不是使用 VideoPlayer。

struct PlayerLayerView: UIViewRepresentable {
    let player: AVPlayer
    func makeUIView(context: Context) -> UIView { PlayerUIView(player: player) }
    func updateUIView(_ uiView: UIView, context: Context) { }
}

承载播放器的 UIView

自定义 UIView 承载一个 AVPlayerLayer，并将其调整为自身的边界大小，从而提供没有控件的视频表面。

final class PlayerUIView: UIView {
    init(player: AVPlayer) {
        super.init(frame: .zero)
        let layer = AVPlayerLayer(player: player)
        layer.videoGravity = .resizeAspectFill
        self.layer.addSublayer(layer)
    }
    required init?(coder: NSCoder) { fatalError() }
}

画中画

要实现画中画，请将 AVPictureInPictureController 与播放器图层配合使用，并启用后台音频功能。

let pip = AVPictureInPictureController(playerLayer: playerLayer)
pip?.startPictureInPicture()

清理

视图消失时暂停播放器并移除观察者，以释放资源并停止您未打算继续播放的后台音频。

.onDisappear {
    player.pause()
    // remove notification observers here
}

快速检查：SwiftUI 播放器

测试您对在 SwiftUI 中嵌入播放器的理解。

在交互式课程中回答

回顾：在 SwiftUI 中嵌入播放器

AVKit 的 VideoPlayer 会嵌入带有标准控件的 AVPlayer；将播放器保存在 @State 中以保持实例稳定，并通过 onAppear/onDisappear 控制播放和暂停。通过尾随闭包添加覆盖层，并在收到结束通知时循环播放。

如需自定义的无控件播放，请将 AVPlayerLayer 包装在 UIViewRepresentable 中，并在视图消失时清理观察者。

免费开始

用 AI 导师学习 Swift — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 122
课程: 409

免费开始学习查看完整课程

常见问题解答

「在 SwiftUI 中嵌入播放器」课时是免费的吗？

是的 — 「在 SwiftUI 中嵌入播放器」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Swift Academy 课程的其余内容，请升级到 CoddyKit PRO。 Swift Academy 课程共包含 4 节课。

「在 SwiftUI 中嵌入播放器」这节课中我会学到什么？

使用 VideoPlayer 和自定义播放器视图。你通过在浏览器中直接运行的动手代码来练习 Swift Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Swift Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Swift Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「在 SwiftUI 中嵌入播放器」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Swift Academy 课中编写并运行代码吗？

能。每节 Swift Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Swift Academy