Cómo crear un reproductor de vídeo en SwiftUI usando AVKit

Tutorial completo paso a paso en Xcode

El vídeo es uno de los formatos de contenido más importantes en las aplicaciones modernas. Desde apps educativas hasta redes sociales, plataformas de streaming o apps corporativas, reproducir vídeo de forma eficiente y con buena experiencia de usuario es una necesidad básica.

En este tutorial aprenderás a construir un reproductor de vídeo sencillo pero funcional en SwiftUI usando AVKit, el framework oficial de Apple para trabajar con audio y vídeo. Usaremos Xcode, SwiftUI y las herramientas nativas de iOS para crear una app capaz de reproducir vídeos locales y en streaming.

Al finalizar este artículo sabrás:

• Qué es AVKit y cómo se integra con SwiftUI
• Cómo reproducir un vídeo desde una URL
• Cómo usar VideoPlayer
• Cómo controlar la reproducción (play, pause)
• Cómo mejorar la experiencia de usuario

1. ¿Qué es AVKit?

AVKit es el framework de Apple que proporciona una interfaz de alto nivel para reproducir contenido audiovisual. Se apoya en AVFoundation, que es el motor de bajo nivel que realmente gestiona los flujos de audio y vídeo.

AVKit ofrece componentes ya preparados, como:

• AVPlayer
• AVPlayerItem
• AVPlayerViewController
• VideoPlayer (en SwiftUI)

Gracias a VideoPlayer, podemos integrar un reproductor en SwiftUI con muy poco código.

2. Crear un nuevo proyecto en Xcode

Vamos a empezar desde cero.

1. Abre Xcode
2. Pulsa File → New → Project
3. Selecciona iOS → App
4. Pulsa Next
5. Configura:
   • Product Name: SwiftUIVideoPlayer
   • Interface: SwiftUI
   • Language: Swift
6. Pulsa Create

Xcode creará un proyecto con un archivo principal llamado SwiftUIVideoPlayerApp.swift y una vista ContentView.swift.

3. Importar AVKit

Abre ContentView.swift y añade:

import SwiftUI
import AVKit

Con esto tendremos acceso a VideoPlayer y AVPlayer.

4. El concepto clave: AVPlayer

Antes de escribir código, es importante entender qué es AVPlayer.

AVPlayer es el objeto que:

• Carga el vídeo
• Controla la reproducción
• Maneja el buffering
• Permite pausar, reproducir y detener

En SwiftUI normalmente creamos una instancia de AVPlayer y se la pasamos al VideoPlayer.

5. Crear nuestro primer reproductor

Vamos a empezar con algo simple: reproducir un vídeo desde una URL.

Usaremos este vídeo de ejemplo:

https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4

Modifica ContentView.swift así:

struct ContentView: View {

    let player = AVPlayer(url: URL(string:
        "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4")!)

    var body: some View {
        VideoPlayer(player: player)
            .onAppear {
                player.play()
            }
            .edgesIgnoringSafeArea(.all)
    }
}

Ejecuta la app en el simulador o en un iPhone real.
Deberías ver el vídeo reproduciéndose automáticamente.

¡Ya tienes un reproductor de vídeo funcionando!

6. Añadir controles de reproducción

Ahora vamos a mejorar la app añadiendo botones de play y pause.

Vamos a convertir el AVPlayer en una propiedad de estado para poder controlarlo:

struct ContentView: View {

    @State private var player = AVPlayer(url: URL(string:
        "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4")!)

    var body: some View {
        VStack {
            VideoPlayer(player: player)
                .frame(height: 250)

            HStack(spacing: 40) {
                Button("Play") {
                    player.play()
                }

                Button("Pause") {
                    player.pause()
                }
            }
            .padding()
        }
    }
}

Ahora el usuario puede controlar la reproducción.

7. Reproducir vídeos locales

También puedes reproducir vídeos que estén incluidos en tu app.

1. Arrastra un archivo .mp4 a tu proyecto en Xcode
2. Marca Copy items if needed

Luego obtén su URL así:

if let url = Bundle.main.url(forResource: "mi_video", withExtension: "mp4") {
    player = AVPlayer(url: url)
}

Esto es ideal para vídeos introductorios, tutoriales o contenido offline.

8. Mejorar la interfaz

Vamos a hacer que el reproductor se vea mejor:

VStack {
    VideoPlayer(player: player)
        .cornerRadius(12)
        .shadow(radius: 10)
        .padding()

    HStack {
        Button(action: {
            player.play()
        }) {
            Image(systemName: "play.fill")
                .font(.largeTitle)
        }

        Button(action: {
            player.pause()
        }) {
            Image(systemName: "pause.fill")
                .font(.largeTitle)
        }
    }
}

Ahora tenemos botones con iconos de sistema.

9. Detectar cuando el vídeo termina

Podemos observar cuando el vídeo acaba:

.onReceive(NotificationCenter.default.publisher(for: .AVPlayerItemDidPlayToEndTime)) { _ in
    print("El vídeo ha terminado")
}

Puedes usar esto para mostrar otro contenido o reiniciar el vídeo.

10. Reproducir automáticamente al entrar

Es buena práctica iniciar el vídeo cuando la vista aparece:

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

Esto evita que el vídeo siga sonando cuando el usuario cambia de pantalla.

11. Controlar el audio

Puedes silenciar el vídeo:

player.isMuted = true

O ajustar el volumen:

player.volume = 0.5

12. Cargar vídeos dinámicamente

Puedes crear una lista de vídeos y reproducirlos:

let videos = [
    "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
    "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
]

Y cambiar el AVPlayer según lo que seleccione el usuario.

13. Buenas prácticas

• Usa siempre AVPlayer como estado (@State)
• Pausa el vídeo cuando la vista desaparece
• Evita múltiples instancias de AVPlayer
• Usa vídeos H.264 o H.265 para mejor rendimiento

14. Conclusión

SwiftUI y AVKit hacen que crear un reproductor de vídeo sea sorprendentemente fácil. Con solo unas pocas líneas de código puedes integrar reproducción de vídeo profesional en tu aplicación.

En este tutorial has aprendido:

• A usar VideoPlayer
• A trabajar con AVPlayer
• A reproducir vídeos locales y remotos
• A controlar play, pause y volumen
• A integrar vídeo de forma correcta en SwiftUI

Con estas bases ya puedes construir apps educativas, plataformas de vídeo, reproductores multimedia y mucho más.

Si tienes cualquier duda sobre este artículo, contacta conmigo y estaré encantado de ayudarte 🙂.Puedes contactar conmigo en mi perfil de X o en mi perfil de Instagram