Descubre cómo añadir un reproductor de video en SwiftUI

Libranner Santos

18 septiembre, 20232min de lectura

Aprende a incorporar videos en tus aplicaciones SwiftUI utilizando la vista VideoPlayer de AVKit. Esta vista te proporciona las herramientas necesarias para reproducir y controlar videos.

Echemos un vistazo a un ejemplo práctico:

import AVKit
import SwiftUI

struct CustomVideoPlayer: View {
  var body: some View {
    // 1
    if let url =  Bundle.main.url(forResource: "my-video", withExtension: "mp4") {
      // 2
      VideoPlayer(player: AVPlayer(url: url))
      // 3
        .frame(width: 300, height: 200)
    } else {
      Text("No video")
    }
  }
}

Analizemos brevemente este código:

1. Obtenemos la ubicación del video, que es parte de nuestro proyecto, y lo guardamos en la variable url.
2. Creamos una instancia de VideoPlayer utilizando un AVPlayer configurado con la URL obtenida.
3. Personalizamos el tamaño del reproductor utilizando el modificador frame. Si deseas que ocupe toda la pantalla, puedes reemplazar .frame(width: 300, height: 200) por .ignoresSafeArea().

En este ejemplo, utilizamos Bundle.main.url(forResource:withExtension:) para obtener la URL del video. Sin embargo, también puedes reproducir videos alojados en servidores externos de la siguiente manera:

VideoPlayer(player: AVPlayer(url:  URL(string: "<url del video>")!))

Agregando un overlay

Si deseas superponer elementos sobre el video, puedes utilizar otro constructor de VideoPlayer:

init(player: AVPlayer?, @ViewBuilder videoOverlay: () -> VideoOverlay)

Este constructor te permite agregar contenido personalizado sobre el video. Veamos un ejemplo:

VideoPlayer(player: AVPlayer(url: url)) {
  HStack {
    Spacer()
    Image(systemName: "video.bubble.left.fill")
      .foregroundColor(.green)
      .padding()
  }
}

En este código, además de la URL del video, pasamos un closure. Este closure contiene HStack que con un SF Symbol con el color green y un Spacer para posicionarlo a la derecha.

Así es como se vería:

Puedes colocar cualquier vista personalizada y utilizar todo el espacio disponible según tus necesidades.