Integrar reproductores en SwiftUI
Utilice VideoPlayer y vistas de reproductor personalizadas.
Integrar reproductores en SwiftUI es una lección gratuita de Swift Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Swift Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Swift Academy incluye 4 lecciones en total.
Vídeo en SwiftUI
SwiftUI proporciona la vista VideoPlayer (de AVKit) para integrar la reproducción de medios de forma declarativa, con controles integrados.
import SwiftUI
import AVKitLa vista VideoPlayer
VideoPlayer recibe un AVPlayer y lo renderiza con controles de transporte estándar: reproducir, pausar, barra de reproducción y pantalla completa.
struct PlayerScreen: View {
let player = AVPlayer(url: URL(string: "https://example.com/v.mp4")!)
var body: some View {
VideoPlayer(player: player)
.frame(height: 240)
}
}Conservación del reproductor en el estado
Almacene AVPlayer en @State para que sobreviva a las actualizaciones de la vista. Si lo recreara en cada llamada a body, la reproducción se reiniciaría.
struct PlayerScreen: View {
@State private var player = AVPlayer(
url: URL(string: "https://example.com/v.mp4")!)
var body: some View {
VideoPlayer(player: player)
}
}Control de la reproducción
Controle la reproducción mediante los modificadores del ciclo de vida de SwiftUI: iníciela cuando la vista aparezca y páusela cuando desaparezca para evitar que el audio continúe fuera de la pantalla.
VideoPlayer(player: player)
.onAppear { player.play() }
.onDisappear { player.pause() }Contenido superpuesto
El inicializador de VideoPlayer acepta un cierre de superposición para colocar una interfaz personalizada sobre el vídeo, como títulos, distintivos o subtítulos.
VideoPlayer(player: player) {
VStack {
Spacer()
Text("Live")
.padding(6)
.background(.red, in: Capsule())
}
}Reproducción en bucle
Repita la reproducción observando la notificación de finalización del elemento y buscando de nuevo la posición cero. Otra opción es usar un AVPlayerLooper con un reproductor de cola.
.onAppear {
NotificationCenter.default.addObserver(
forName: .AVPlayerItemDidPlayToEndTime,
object: player.currentItem, queue: .main) { _ in
player.seek(to: .zero); player.play()
}
}Sesión de audio para vídeo
Configure un AVAudioSession para que el audio del vídeo se comporte correctamente, respetando el interruptor de silencio o reproduciéndose a través de él, según prefiera.
try? AVAudioSession.sharedInstance().setCategory(.playback)Reproductores personalizados con UIViewRepresentable
Cuando necesite una interfaz completamente personalizada (sin controles del sistema), envuelva un AVPlayerLayer en un UIViewRepresentable en lugar de usar VideoPlayer.
struct PlayerLayerView: UIViewRepresentable {
let player: AVPlayer
func makeUIView(context: Context) -> UIView { PlayerUIView(player: player) }
func updateUIView(_ uiView: UIView, context: Context) { }
}La UIView subyacente
La UIView personalizada aloja un AVPlayerLayer y ajusta su tamaño a sus límites, lo que proporciona una superficie de vídeo sin controles.
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() }
}Imagen dentro de imagen
Para usar Imagen dentro de imagen, utilice AVPictureInPictureController con la capa del reproductor y active la capacidad de audio en segundo plano.
let pip = AVPictureInPictureController(playerLayer: playerLayer)
pip?.startPictureInPicture()Limpieza
Ponga el reproductor en pausa y elimine los observadores cuando desaparezca la vista para liberar recursos y detener el audio en segundo plano que no pretendía mantener.
.onDisappear {
player.pause()
// remove notification observers here
}Comprobación rápida: reproductores de SwiftUI
Compruebe su comprensión de cómo insertar reproductores en SwiftUI.
Resumen: insertar reproductores en SwiftUI
El VideoPlayer de AVKit incorpora un AVPlayer con controles estándar; mantenga el reproductor en @State para conservar una instancia estable y controle la reproducción y la pausa desde onAppear/onDisappear. Añada superposiciones mediante el cierre final y repita la reproducción cuando llegue la notificación de finalización.
Para una reproducción personalizada y sin controles, envuelva un AVPlayerLayer en un UIViewRepresentable y elimine los observadores al desaparecer la vista.
Aprende Swift con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 122
- Lecciones
- 409
Preguntas frecuentes
¿La lección «Integrar reproductores en SwiftUI» es gratis?
Sí — el texto completo de «Integrar reproductores en SwiftUI» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Swift Academy, actualiza a CoddyKit PRO. El curso de Swift Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Integrar reproductores en SwiftUI»?
Utilice VideoPlayer y vistas de reproductor personalizadas. Practicas Swift Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Swift Academy?
No se requiere experiencia previa. Swift Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Integrar reproductores en SwiftUI»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Swift Academy?
Sí. Cada lección de Swift Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Reproducir contenido multimedia con AVPlayer
- Grabar audio
- AVAsset y composición
- Integrar reproductores en SwiftUI