VideoPlayer en SwiftUI - Cómo reproducir videos en SWIFTUI en Español

Hoy en SwiftBeta vamos a ver a cómo reproducir videos dentro de nuestras apps en SwiftUI. Vamos a utilizar una vista llamada VideoPlayer que está dentro de un framework llamado AVKit.

VideoPlayer en código

Reproducir un video en SwiftUI previamente añadido a nuestro proyecto de Xcode

Lo primero de todo que vamos hacer es crear un proyecto en Xcode de cero y dentro de este proyecto vamos a arrastrar un video (para que así podamos acceder a él desde nuestro código).
Una vez hemos añadido un video a nuestro proyecto de Xcode, ahora nos vamos a la vista ContentView e importamos AVKit y dentro del body ponemos el siguiente código:

import SwiftUI
import AVKit

struct ContentView: View {
    var body: some View {
        VStack {
            VideoPlayer(player: 
            .init(url: Bundle.main.url(forResource: "video",
            withExtension: "MOV")!))
            Text("▶️ ¡Suscríbete y apoya el canal de SwiftBeta en Youtube!")
                .bold()
                .padding(60)
        }.ignoresSafeArea()
    }
}

Hemos usado VideoPlayer y le hemos pasado como parámetro una intancia de AVPlayer con la URL del video que acabamos de añadir. Si vamos al canvas y le damos al Live Preview nos aparece un Button donde al pulsarlo nos reproduce el video. Fíjate que con muy pocas líneas de código podemos reproducir un video dentro de nuestra app con SwiftUI.

VideoPlayer con Overlay

Encima de la vista de VideoPlayer podemos añadir vistas. El siguiente código añade un Text encima del video:

import SwiftUI
import AVKit

struct ContentView: View {
    var body: some View {
        VStack {
            VideoPlayer(player: 
            .init(url: 
            Bundle.main.url(forResource: "video", 
            withExtension: "MOV")!)) {
                Text("👍 Si te ha gustado\npuedes dar like al video")
                    .bold()
                    .foregroundColor(.white)
                    Spacer()
            }
            Text("▶️ ¡Suscríbete y apoya el canal de SwiftBeta en Youtube!")
                .bold()
                .padding(60)
        }.ignoresSafeArea()
    }
}

Reproducir video en SwiftUI con una URL

Ahora vamos a ver otra manera de reproducir un video con SwiftUI, lo único que necesitaremos será la URL del video.

En mi caso he escogido una URL de Giphy

https://media0.giphy.com/media/nZYasmPnlRT1oyHDlV/giphy480p.mp4

import SwiftUI
import AVKit

struct ContentView: View {
	let url = "https://media0.giphy.com/media/nZYasmPnlRT1oyHDlV/giphy480p.mp4"
    var body: some View {
        VStack {
            VideoPlayer(player: 
            .init(url: 
            URL(string: url)!)) {
                Text("👍 Si te ha gustado\npuedes dar like al video")
                    .bold()
                    .foregroundColor(.white)
                    Spacer()
            }
            Text("▶️ ¡Suscríbete y apoya el canal de SwiftBeta en Youtube!")
                .bold()
                .padding(60)
        }.ignoresSafeArea()
    }
}

Funciona exactamente igual que en el primer caso, lo úncio que el video en lugar de estar en formato local está en remoto.

Conclusión

Hemos visto dos maneras de reproducir videos en nuestra app con SwiftUI. Cuando creas tu app debes valorar que opción escoger, con la primera nuestra app sería más grande a medida que añadimos videos, y con la segunda debemos segurarnos de tener conexión a internet para poder reproducir los videos.