VideoPlayer

Clase 21 de 22 • Curso de SwiftUI desde Cero (2021)

Joaquin Segovia

student•

Dejo mi Reto, donde le agregue la misma imagen en Z0 en blur y expandida a tope, y la vista del reproductor de fondo todo negro Imagen y código debajo

//
//  Players.swift
//  Platzi
//
//  Created by Joaquin Segovia on 9/2/22.
//

import SwiftUI
import AVKit

struct Players: View {
    @State var isPlayerActive:Bool = false
    var body: some View {
        NavigationView{
            ZStack {
                Image("cuphead").resizable()
                    .aspectRatio(contentMode: .fill).frame(width: 400, height: 868, alignment: .center)
                    .blur(radius: /*@START_MENU_TOKEN@*/8.0/*@END_MENU_TOKEN@*/)
                VStack{
                    Button(action: {

                        isPlayerActive.toggle()
                    }, label: {
                        ZStack {
                            Image("cuphead").resizable().aspectRatio(contentMode:.fit)
                            Image(systemName: "play.circle").resizable().aspectRatio( contentMode: .fit).foregroundColor(.white).frame(width: 50, height: 50, alignment: .center)
                        }
                    })//Button
                    NavigationLink(
                        destination: reproductor(),
                        isActive: $isPlayerActive,
                        label:{
                            EmptyView()
                        }
                    )//NavigationLink
                }//VStack
            }.ignoresSafeArea()//ZStack
        }//NavigationView
    }//Body
}

struct reproductor:View{
    var body: some View{
        ZStack {
            Color.black
            VideoPlayer(player: AVPlayer(url: URL(string: "https://cdn.cloudflare.steamstatic.com/steam/apps/256705156/movie480.mp4")!))
                .frame(width: 420, height: 360, alignment: .center)
        }.ignoresSafeArea()
    }
}


struct Players_Previews: PreviewProvider {
    static var previews: some View {
        Players()
    }
}

Froylan Almeida

student•

Por qué no funcionan links de YouTube?

Juan Villalvazo

teacher•

Ya que la librería utilizada no implementa el navegador completamente, no es su función. Saludos : )

Joaquin Segovia

student•

La Lbereria solo te dejaría archivos en concreto, no links sueltos.Podrias probar el iframe que te deja YouTube copiar y compartir pero no e si eso funciona.

Fernando Florez

student•

Reto!

//
//  CustomPlayer.swift
//  Platzi
//
//  Created by Fernando Florez on 11/08/21.
//

import SwiftUI
import AVKit

struct URLS {
    static let main = "https://cdn.cloudflare.steamstatic.com/steam/apps/256705156/movie480.mp4"
}

struct CustomPlayer: View {
    @State var isPlayerActive: Bool = false
    
    var body: some View {
        NavigationView {
            VStack {
                Button(action: {
                    isPlayerActive.toggle()
                }) {
                    ZStack {
                        Image("cuphead")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                        
                        Image(systemName: "play.fill")
                            .font(.system(size: 80))
                            .foregroundColor(.white)
                    }
                }
                
                NavigationLink(
                    destination: VideoModule(videoUrl: URLS.main),
                    isActive: $isPlayerActive,
                    label: {
                        EmptyView()
                    }
                )
            }
        }
        .accentColor(.red)
    }
}

struct VideoModule: View {
    var videoUrl: String
    
    var body: some View {
        ZStack {
            Color.black
            
            VideoPlayer(player: AVPlayer(url: URL(string: videoUrl)! ))
                .aspectRatio(contentMode: .fit)
            
            Spacer()
        }
        .ignoresSafeArea()
    }
}

struct CustomPlayer_Previews: PreviewProvider {
    static var previews: some View {
        CustomPlayer()
        VideoModule(videoUrl: URLS.main)
    }
}

Diego Andrés Beltrán Garavito

student•

Se queda la pantalla en negro, no reproduce video, me da lo siguiente en consola.

021-08-12 23:07:59.235612-0500 Platzi[13885:739750] [] nw_protocol_get_quic_image_block_invoke dlopen libquic failed 2021-08-12 23:08:01.095616-0500 Platzi[13885:739801] [plugin] AddInstanceForFactory: No factory registered for id <CFUUID 0x600001b37e40> F8BB1C28-BAE8-11D6-9C31-00039315CD46 2021-08-12 23:08:01.449227-0500 Platzi[13885:739118] <CATransformLayer: 0x600001b18940> - changing property masksToBounds in transform-only layer, will have no effect 2021-08-12 23:08:01.451437-0500 Platzi[13885:739118] <CATransformLayer: 0x600001b01ca0> - changing property masksToBounds in transform-only layer, will have no effect 2021-08-12 23:08:01.457892-0500 Platzi[13885:739118] <CATransformLayer: 0x600001b1dee0> - changing property masksToBounds in transform-only layer, will have no effect 2021-08-12 23:08:01.465774-0500 Platzi[13885:739118] <CATransformLayer: 0x600001b18fc0> - changing property masksToBounds in transform-only layer, will have no effect 2021-08-12 23:08:01.469751-0500 Platzi[13885:739118] <CATransformLayer: 0x600001b02160> - changing property masksToBounds in transform-only layer, will have no effect 2021-08-12 23:08:01.554058-0500 Platzi[13885:739118] <CATransformLayer: 0x600001b1dee0> - changing property allowsGroupBlending in transform-only layer, will have no effect 2021-08-12 23:08:01.554385-0500 Platzi[13885:739118] <CATransformLayer: 0x600001b18fc0> - changing property allowsGroupBlending in transform-only layer, will have no effect

Héctor Eduardo López Carballo

student•

Hola!

Pudiste resolverlo? Podrías compartir tu solución?

Joaquin Segovia

student•

Que versiones de OS, Xcode y simulador esta usando

Juan Sebastián Vargas Castañeda

student•

Reto

struct Player: View {
    
    var body: some View {
     
        NavigationView
        {
            VideoButton()
        }
    }
}

Video Button Struct

struct VideoButton: View
{
    
    @State var isPlayerActive:Bool = false
    
    var body: some View
    {
        VStack
        {
            Button(action: {isPlayerActive = true}, label: {
                
                ZStack
                {
                    Image("cuphead").resizable().aspectRatio(contentMode: .fit)
                    Image(systemName: "play.fill").foregroundColor(.white)
                }
            })
            
            NavigationLink(
                destination:
                    PlayerSection(),
                isActive: $isPlayerActive,
                label:
                {
                    EmptyView()
                })
            
        }
    }
}

Player Section struct

struct PlayerSection: View
{
    var body: some View
    {
        ZStack
        {
            Color.black
            
            VideoPlayer(player: AVPlayer( url: URL(string: "https://cdn.cloudflare.steamstatic.com/steam/apps/256705156/movie480.mp4")!)).frame(width: 420, height: 360, alignment: .center)// Hay que ponerle ! un wrap, dado que URL podría arrojar excepción.
        }.ignoresSafeArea()
    }
}

Nicolas Silva

student•

Aca va el mio, tuve un problema con el resize de la imagen del videoplayer, pero en general todo bien

//
//  Player.swift
//  Platzi
//
//  Created by Nicolas Silva Aravena on 05-06-23.
//

import SwiftUI
import AVKit

struct Player: View {
  var body: some View {
    NavigationStack {
      VStack {
        NavigationLink(destination: VideoPlayerComponent(), label: {
          ZStack {
            Image("cuphead").resizable().aspectRatio(contentMode: .fill).ignoresSafeArea().blur(radius: 10)
            Image("cuphead").aspectRatio(contentMode: .fit).clipShape(RoundedRectangle(cornerRadius: 25))
            Circle().frame(width: 100, height: 100, alignment: .center).foregroundColor(Color.gray.opacity(0.8))
            Image(systemName: "play.fill").resizable().aspectRatio(contentMode: .fit).frame(width: 50, height: 50, alignment: .center).padding(.leading, 10).foregroundColor(Color.white)
          }
        })
      }
    }
  }
}

struct VideoPlayerComponent: View {
  var videoURL = "https://cdn.cloudflare.steamstatic.com/steam/apps/256705156/movie480.mp4"
  
  var body: some View {
    ZStack {
      VideoPlayer(player: AVPlayer(url: URL(string: videoURL)!))
    }.ignoresSafeArea()
  }
}

struct Player_Previews: PreviewProvider {
  static var previews: some View {
    Player()
  }
}

Nicolas Vezzali Dussio

student•

Reto (Actualizado a iOS 16+):

import SwiftUI
import AVKit

struct VideoPlayers: View {

    @State var isPlayerActive: Bool = false

    var body: some View {

        NavigationView {
            ZStack {
                Image("cupHead").resizable()
                    .aspectRatio(contentMode: .fill).frame(width: 400, height: 868, alignment: .center)
                    .blur(radius: /*@START_MENU_TOKEN@*/8.0/*@END_MENU_TOKEN@*/)

                NavigationLink {
                    ReproductorVideo()
                } label: {
                    ZStack {
                        Image("cupHead")
                            .resizable()
                            .aspectRatio(contentMode: .fit)

                        Image(systemName: "play.circle")
                            .resizable()
                            .frame(width: 100, height: 100, alignment: .center)
                            .foregroundColor(Color.white)
                    }
                }
            }
        }
    }
}


struct ReproductorVideo: View {
    private var vm = AVPlayer(url: URL(string: "https://cdn.cloudflare.steamstatic.com/steam/apps/256705156/movie480.mp4")!)
    var body: some View {
        VideoPlayer(player: vm).onAppear{
            vm.play()
        }.onDisappear{
            vm.pause()
        }
        .aspectRatio(contentMode: .fit)
    }
}

struct VideoPlayers_Previews: PreviewProvider {
    static var previews: some View {
        VideoPlayers()
        ReproductorVideo()
    }
}

Andrea stefanny García mejia

student•

Juan Salvador Vilca Paredes

student•

el navigation link que usa es bastante útil, aunque no es necesario en algunos casos como este, podrian simplificar su codigo asi:

NavigationLink {
	PlayerView() // destino: vista
} label: {
	SomeView() // label: Image, Text o cualquier vista
}

christian hernández rivera

student•

No es necesario poner el botón para cambiar de vista

import SwiftUI
import AVKit

struct VideoPlayers: View {
    
    @State var isPlayerActive: Bool = false
    
    var body: some View {
        
        NavigationView {
            VStack {
                
                NavigationLink {
                    ReproductorVideo()
                } label: {
                    ZStack {
                        Image("cuphead")
                            .resizable()
                        .aspectRatio(contentMode: .fit)
                        
                        Image(systemName: "play.circle")
                            .resizable()
                            .frame(width: 100, height: 100, alignment: .center)
                            .foregroundColor(Color.white)
                    }
                }

            }
        }
    }
}


struct ReproductorVideo: View {
    var body: some View {
        VideoPlayer(player: AVPlayer(url: URL(string: "https://cdn.cloudflare.steamstatic.com/steam/apps/256705156/movie480.mp4")! ))
            .aspectRatio(contentMode: .fit)
    }
}

struct VideoPlayers_Previews: PreviewProvider {
    static var previews: some View {
        VideoPlayers()
            .previewInterfaceOrientation(.portraitUpsideDown)
        ReproductorVideo()
    }
}

Andrés Antonio Azuara Portillo

student•

Estaba checando y hay otro inicializador para NavigationLink en el cual solamente necesita el destino o lo que renderizara al presionarlo y un label, siento que puede ayudar porque así evitas tener un botón el cual tiene la imagen, y aparte tener un NavigationLink con un EmptyView, y solamente se necesita crear el NavigationLink

NavigationLink(destination: View(), label: {})

Ricardo Saenz Salazar

student•

Reto

import SwiftUI
import AVKit

struct Retovideoplayer: View {
    @State var isPlayerActive: Bool = false
    
    var body: some View {
        
        NavigationView{
            
            VStack{
                
                Button(action: {isPlayerActive = true }, label: {
                    ZStack {
                        Image("cuphead").resizable().aspectRatio(contentMode: .fit)
                        Image(systemName: "play.fill").foregroundColor(.white)
                    }
                })
                
                NavigationLink(
                    destination: VideoCup(),
                    isActive: $isPlayerActive,
                    label: {
                        EmptyView()
                })
            }
        }
    }
}

struct  VideoCup: View {
    var body: some View {
        
        ZStack{
            
            Color.black
            VStack{
                
                Text("Cuphead Trailer").foregroundColor(.white)
                
                VideoPlayer(player: AVPlayer(url: URL(string: "https://cdn.cloudflare.steamstatic.com/steam/apps/256705156/movie480.mp4")!)).frame(width: 420, height: 360, alignment: .center)
                
            }
        }.ignoresSafeArea()
    }
}

struct Retovideoplayer_Previews: PreviewProvider {
    static var previews: some View {
        Retovideoplayer()
    }
}

Emilio Yoltic

student•

struct players: View {
    @State var moving : Bool = false
    var body: some View {
        NavigationView{
   
            VStack{
                Button(action:{moving.toggle()},label:{
                    ZStack{
                        Color.black
                        Image("platzi").resizable().aspectRatio(contentMode:.fit)
                        Image(systemName: "play.fill").foregroundColor(Color.white).frame(width: 100, height: 100, alignment: .center)
                            
                    }.ignoresSafeArea()
                })
                NavigationLink(destination:video(), isActive: $moving, label: {EmptyView()})
            }
        }

    }
}
struct video: View{
    var body : some View{
        ZStack{
            Color.black
            VideoPlayer(player:AVPlayer(url: URL(string: "https://cdn.cloudflare.steamstatic.com/steam/apps/256705156/movie480.mp4")!))
        }.ignoresSafeArea()

    }
}

VideoPlayer

Introducción a SwiftUI

¿Qué es SwiftUI?

Instalación de Xcode

Uso y características de Xcode

Las bases de Swift para SwiftUI

Variables y constantes

Funciones y argument labels

Structs, propiedades y métodos

Diferencia entre struct y class

Computed properties

Las bases de SwiftUI e introducción a protocolos

Vistas y controles

¿Qué son las vistas y controles en SwiftUI?

Botones

Imágenes

Campos de texto y el property wrapper @state

Divisores

Contenedores de interfaz de usuario

HStack, VStack y el elemento Spacer

Resolviendo el reto de contenedores

ZStack y el modificador padding

Dividir la app en módulos de contenedores

Más vistas y controles

TabView

NavigationView, NavigationLink e introducción a múltiples pantallas

VideoPlayer

Las posibilidades de SwiftUI

Las posibilidades de SwiftUI