Swift Academy · บทเรียน

การฝังตัวเล่นใน SwiftUI

ใช้ VideoPlayer และมุมมองตัวเล่นแบบกำหนดเอง

บทเรียน 4 จาก 413 ขั้นตอน

การฝังตัวเล่นใน SwiftUI เป็นบทเรียน Swift Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน 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 รับ closure สำหรับซ้อนทับ เพื่อให้คุณวางส่วนติดต่อผู้ใช้แบบกำหนดเองไว้เหนือวิดีโอ เช่น ชื่อ ป้ายกำกับ และคำบรรยาย

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

การเล่นวนซ้ำ

ทำให้เล่นวนซ้ำโดยสังเกตการแจ้งเตือนเมื่อจบรายการ แล้วเลื่อนไปยังศูนย์ เครื่องมืออีกทางเลือกคือ 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

VideoPlayer ของ AVKit ฝัง AVPlayer พร้อมตัวควบคุมมาตรฐาน ให้เก็บตัวเล่นไว้ใน @State เพื่อให้เป็นอินสแตนซ์เดิมที่เสถียร และควบคุมการเล่นหรือ pause จาก onAppear/onDisappear เพิ่มองค์ประกอบซ้อนทับผ่านโคลสเชอร์ต่อท้าย และวนเล่นเมื่อได้รับการแจ้งเตือนว่าการเล่นสิ้นสุด

หากต้องการการเล่นแบบกำหนดเองที่ไม่มีตัวควบคุม ให้ห่อ AVPlayerLayer ไว้ใน UIViewRepresentable และเก็บกวาดตัวสังเกตการณ์เมื่อมุมมองหายไป

เริ่มต้นได้ฟรี

เรียนรู้ Swift ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 122
บทเรียน: 409

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “การฝังตัวเล่นใน SwiftUI” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การฝังตัวเล่นใน SwiftUI” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Swift Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Swift Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การฝังตัวเล่นใน SwiftUI”

ใช้ VideoPlayer และมุมมองตัวเล่นแบบกำหนดเอง คุณปฏิบัติ Swift Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Swift Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Swift Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “การฝังตัวเล่นใน SwiftUI” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Swift Academy นี้ได้ไหม

ได้ บทเรียน Swift Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Swift Academy