SwiftUI中AVPlayer播放循环视频出现边框问题求助

问题描述 #

• 循环播放的视频在真机上显示细边框，模拟器无此问题，且截图时边框会消失
• 已尝试在视频上方添加带描边的矩形、修改videoGravity设置，均未解决问题

相关代码 #

import SwiftUI
import AVFoundation

struct LoopingPlayer: UIViewRepresentable {
    let sizes = Sizes()
    func makeUIView(context: Context) -> some UIView {
        return PlayerUIView(frame: CGRect(x: 0, y: 0, width: sizes.mainWidth / 1.172, height: sizes.mainWidth / 1.172))
    }
    
    func updateUIView(_ uiView: UIViewType, context: Context) {
        //
    }
}

class PlayerUIView: UIView {
    private var playerLayer = AVPlayerLayer()
    private var playerLooper: AVPlayerLooper?
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        //Load Video
        let fileURL = Bundle.main.url(forResource: "Circle", withExtension: "mp4")!
        let playerItem = AVPlayerItem(url: fileURL)
        //Setup Player
        let player = AVQueuePlayer(playerItem: playerItem)
        
        playerLayer.player = player
        playerLayer.videoGravity = .resizeAspectFill
        playerLayer.backgroundColor = UIColor.white.cgColor
        layer.addSublayer(playerLayer)

        //Loop
        playerLooper = AVPlayerLooper(player: player, templateItem: playerItem)
        
        //Play video
        player.play()
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        playerLayer.frame = bounds
    }
    
    required init(coder: NSCoder) {
        fatalError("init(coder: ) has not been implemented")
    }
}

struct LoopingPlayer_Previews: PreviewProvider {
    static var previews: some View {
        LoopingPlayer()
    }
}

真机与模拟器对比 #

可行解决方案 #

1. 修复像素对齐与渲染精度问题 #

真机屏幕渲染精度更高，亚像素错位容易产生细边框，调整如下：

• 在PlayerUIView的init方法中添加，让视频层适配屏幕缩放比例：

  playerLayer.contentsScale = UIScreen.main.scale
  

• 修改layoutSubviews方法，强制视频层对齐像素边界：

  override func layoutSubviews() {
      super.layoutSubviews()
      // 对齐整数像素，避免亚像素渲染缝隙
      playerLayer.frame = bounds.integral
  }
  

2. 消除容器与视频层的缝隙 #

如果视频层和容器视图之间存在细微缝隙，可通过以下方式覆盖：

• 给容器视图设置和视频层一致的背景色，避免透出其他颜色：

  override init(frame: CGRect) {
      super.init(frame: frame)
      backgroundColor = UIColor.white // 新增这行
      // ... 其他原有代码
  }
  

• 或者让视频层稍微超出容器边界，覆盖可能的缝隙：

  override func layoutSubviews() {
      super.layoutSubviews()
      playerLayer.frame = bounds.insetBy(dx: -1, dy: -1)
  }
  

3. 检查视频源文件 #

部分情况是视频本身边缘存在透明像素或编码色差，模拟器和真机色彩管理不同导致显现。可以用视频工具（如Premiere、Final Cut）检查视频边缘，重新导出时确保边缘完全填充目标颜色，避免透明区域。

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