No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

VideoPlayer

21/22
Recursos

Aportes 11

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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()
    }
}

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)
    }
}
  • 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()
    }
}

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()

    }
}