Swift/SwiftUI中如何移除视频背景实现透明显示？

核心前提 #

首先要明确：你的视频文件必须包含Alpha通道（比如采用ProRes 4444编码的MOV文件）。普通视频本身没有透明信息，无论代码怎么写都无法实现透明背景。

你的代码存在的问题 #

1. frameDuration设置完全错误：你把单帧显示时长设成了整个视频的时长（8秒），这会导致视频无法正常渲染。
2. 缺少图层渲染指令：只添加了顶层合成指令，但没有指定要渲染的视频轨道，导致视频内容不显示，仅出现黑框。
3. 硬写renderSize参数：固定1000x1000会导致视频拉伸或出现黑边，应该用视频原始分辨率。
4. @State属性初始化阶段操作风险：SwiftUI的@State属性在视图初始化时未完全就绪，直接在init中修改player可能引发意外。

修正后的代码 #

import AVKit
import SwiftUI

struct VideoPlayerView: View {
    @State private var player = AVPlayer()
    
    var body: some View {
        VStack {
            VideoPlayer(player: player)
                .frame(width: 500, height: 500)
                .onAppear {
                    setupTransparentVideo()
                    player.play()
                }
        }
    }
    
    private func setupTransparentVideo() {
        guard let videoURL = Bundle.main.url(forResource: "MyVideo", withExtension: "mov") else {
            print("视频文件不存在")
            return
        }
        
        let asset = AVURLAsset(url: videoURL)
        guard let videoTrack = asset.tracks(withMediaType: .video).first else {
            print("无法获取视频轨道")
            return
        }
        
        // 创建图层指令，指定要渲染的视频轨道
        let layerInstruction = AVMutableVideoCompositionLayerInstruction(assetTrack: videoTrack)
        
        // 配置顶层合成指令
        let compositionInstruction = AVMutableVideoCompositionInstruction()
        compositionInstruction.backgroundColor = UIColor.clear.cgColor
        compositionInstruction.timeRange = CMTimeRangeMake(start: .zero, duration: asset.duration)
        compositionInstruction.layerInstructions = [layerInstruction]
        
        // 配置视频合成参数
        let videoComposition = AVMutableVideoComposition()
        videoComposition.instructions = [compositionInstruction]
        videoComposition.renderSize = videoTrack.naturalSize
        // 根据视频帧率计算单帧时长（600是常用的时间刻度，保证精度）
        let frameRate = videoTrack.nominalFrameRate
        videoComposition.frameDuration = CMTimeMakeWithSeconds(1/frameRate, preferredTimescale: 600)
        
        // 创建带合成配置的PlayerItem
        let playerItem = AVPlayerItem(asset: asset)
        playerItem.videoComposition = videoComposition
        
        player.replaceCurrentItem(with: playerItem)
    }
}

关键修改说明 #

• 把视频初始化逻辑移到onAppear中，避免@State属性初始化阶段的访问问题。
• 通过videoTrack.naturalSize获取视频原始分辨率作为渲染尺寸，保证画面比例正确。
• 根据视频自身的nominalFrameRate计算单帧时长，确保播放速度正常。
• 添加AVMutableVideoCompositionLayerInstruction明确指定要渲染的视频轨道，解决黑框问题。
• 使用asset.duration自动适配视频时长，无需硬写固定值。

内容的提问来源于stack exchange，提问作者John Mann