VideoPlayer
Clase 21 de 22 • Curso de SwiftUI desde Cero (2021)
Contenido del curso
Joaquin Segovia
student•
hace 4 años
Joaquin Segovia
Froylan Almeida
Juan Villalvazo
Joaquin Segovia
Fernando Florez
Diego Andrés Beltrán Garavito
Héctor Eduardo López Carballo
Joaquin Segovia
Juan Sebastián Vargas Castañeda
Nicolas Silva
Nicolas Vezzali Dussio
Andrea stefanny García mejia
Juan Salvador Vilca Paredes
christian hernández rivera
Andrés Antonio Azuara Portillo
Ricardo Saenz Salazar
Emilio Yoltic
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() } }
Por qué no funcionan links de YouTube?
Ya que la librería utilizada no implementa el navegador completamente, no es su función. Saludos : )
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.
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) } }
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
Hola!
Pudiste resolverlo? Podrías compartir tu solución?
Que versiones de OS, Xcode y simulador esta usando
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() } }
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() } }
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() } }
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 }
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() } }
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: {})
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() } }
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() } }