Início / coding / Perguntas / 78446366
Accepted
Ahmed Zaidan
Asked: 2024-05-08 14:05:43 +0800 CST

A renderização de vídeo não é suave no ScrollView

  • 772

Eu tenho uma visualização de rolagem básica do SwiftUI que abriga muitos vídeos. Quando retiro a cor vermelha do player de vídeo, a visualização de rolagem é muito suave e posso deslizar para baixo e para cima o mais rápido que posso, sem falhas. No entanto, quando adiciono a cor vermelha e deslizo para baixo e depois deslizo para cima, a visualização de rolagem apresenta falhas enquanto os vídeos são renderizados novamente. Como posso corrigir essa falha? Além disso, aplicativos como Instagram ou Twitter já possuem vídeos renderizados logo quando aparecem, e rolar para fora e voltar não fará com que eles sejam renderizados novamente. Como posso conseguir tal comportamento? Fazer isso pode corrigir a falha na renderização dos vídeos.

Copiar código colável

import SwiftUI
import AVFoundation
import AVKit

struct allVids: Identifiable, Hashable {
    var id: String
    var video: String?
}

struct MainTabViewXX: View {
    @State var someData: [allVids] = [
                allVids(id: UUID().uuidString, video: "https://firebasestorage.googleapis.com:443/v0/b/hustle-85b6c.appspot.com/o/stories%2F0FCE66A1-06F7-47CC-A38A-9A95192A2728.mp4?alt=media&token=57921e5a-e5e6-4b54-919b-39be9fbead84"),
                allVids(id: UUID().uuidString, video: "https://firebasestorage.googleapis.com:443/v0/b/hustle-85b6c.appspot.com/o/stories%2F0FCE66A1-06F7-47CC-A38A-9A95192A2728.mp4?alt=media&token=57921e5a-e5e6-4b54-919b-39be9fbead84"),
                allVids(id: UUID().uuidString, video: "https://firebasestorage.googleapis.com:443/v0/b/hustle-85b6c.appspot.com/o/stories%2F0FCE66A1-06F7-47CC-A38A-9A95192A2728.mp4?alt=media&token=57921e5a-e5e6-4b54-919b-39be9fbead84"),
                allVids(id: UUID().uuidString, video: "https://firebasestorage.googleapis.com:443/v0/b/hustle-85b6c.appspot.com/o/stories%2F0FCE66A1-06F7-47CC-A38A-9A95192A2728.mp4?alt=media&token=57921e5a-e5e6-4b54-919b-39be9fbead84"),
                allVids(id: UUID().uuidString, video: "https://firebasestorage.googleapis.com:443/v0/b/hustle-85b6c.appspot.com/o/stories%2F0FCE66A1-06F7-47CC-A38A-9A95192A2728.mp4?alt=media&token=57921e5a-e5e6-4b54-919b-39be9fbead84"),
                allVids(id: UUID().uuidString, video: "https://firebasestorage.googleapis.com:443/v0/b/hustle-85b6c.appspot.com/o/stories%2F0A514500-F1A0-4093-98A2-2847FE46484A.mp4?alt=media&token=69afd165-1ab6-4686-9ad2-2ce485090fe1"),
                allVids(id: UUID().uuidString, video: "https://firebasestorage.googleapis.com:443/v0/b/hustle-85b6c.appspot.com/o/stories%2FE8937043-873E-4178-A90D-C6C03684C700.mp4?alt=media&token=ddc1f616-5427-4722-a96f-ab81739b243e"),
                allVids(id: UUID().uuidString, video: "https://firebasestorage.googleapis.com:443/v0/b/hustle-85b6c.appspot.com/o/stories%2FE8937043-873E-4178-A90D-C6C03684C700.mp4?alt=media&token=ddc1f616-5427-4722-a96f-ab81739b243e"),
                allVids(id: UUID().uuidString, video: "https://firebasestorage.googleapis.com:443/v0/b/hustle-85b6c.appspot.com/o/stories%2FE8937043-873E-4178-A90D-C6C03684C700.mp4?alt=media&token=ddc1f616-5427-4722-a96f-ab81739b243e"),
                allVids(id: UUID().uuidString, video: "https://firebasestorage.googleapis.com:443/v0/b/hustle-85b6c.appspot.com/o/stories%2FE8937043-873E-4178-A90D-C6C03684C700.mp4?alt=media&token=ddc1f616-5427-4722-a96f-ab81739b243e"),
                allVids(id: UUID().uuidString, video: "https://firebasestorage.googleapis.com:443/v0/b/hustle-85b6c.appspot.com/o/stories%2F0FCE66A1-06F7-47CC-A38A-9A95192A2728.mp4?alt=media&token=57921e5a-e5e6-4b54-919b-39be9fbead84")]
    
    var body: some View {
        ScrollView {
           LazyVStack(spacing: 1){
               ForEach(someData) { message in
                    MessageView(urlV: URL(string: message.video ?? "")!, video: message)
               }
           }
        }.ignoresSafeArea()
    }
}

struct MessageView: View {
    @State var urlV: URL
    let video: allVids
    
    var body: some View {
        VStack {
            MessageVideoPlayerX(url: urlV, viewID: video.id)
        }
    }
}

struct MessageVideoPlayerX: View {
    @State var player: AVPlayer? = nil
    let url: URL
    @State var viewID: String
    
    init(url: URL, viewID: String? = nil) {
        self.url = url
        _viewID = State(initialValue: viewID ?? UUID().uuidString)
    }
    
    var body: some View {
        VStack {
            if let vid = player {
                VidPlayer(player: vid).frame(width: 200, height: 350)
            }
            Color.red.frame(width: 200, height: 300)
        }
        .onAppear {
            if player == nil {
                player = AVPlayer(url: url)
            }
            self.player?.isMuted = true
            
            self.player?.play()
        }
        .onDisappear {
            self.player?.pause()
        }
    }
}

struct VidPlayerX : UIViewControllerRepresentable {
    var player : AVPlayer
    
    func makeUIViewController(context: UIViewControllerRepresentableContext<VidPlayerX>) -> AVPlayerViewController {

        let controller = AVPlayerViewController()
        controller.player = player
        controller.showsPlaybackControls = false
        controller.allowsVideoFrameAnalysis = false
        controller.videoGravity = .resizeAspectFill
        return controller
    }
    
    func updateUIViewController(_ uiViewController: AVPlayerViewController, context: UIViewControllerRepresentableContext<VidPlayerX>) { }
}
swift

1 respostas

  1. Best Answer

    Tente esta abordagem, usando let player: AVPlayerem vez de reconstruir uma sempre .onAppearque ela MessageVideoPlayerXaparecer.

    struct MessageVideoPlayerX: View {
    let player: AVPlayer // <--- here
    let url: URL
    let viewID: String

   init(url: URL, viewID: String? = nil) {
       self.url = url
       self.viewID = viewID ?? UUID().uuidString
       self.player = AVPlayer(url: url)  // <--- here
   }

    var body: some View {
        VStack {
            VidPlayerX(player: player).frame(width: 200, height: 350) // <--- here
            Color.red.frame(width: 200, height: 350)
        }
       .onAppear {
           player.isMuted = true
           player.play()
       }
       .onDisappear {
           player.pause()
       }
   }
}
    • 1

relate perguntas