Swift中为MP4视频添加圆角并实现背景透明的问题

问题原因拆解 #

1. 直接给AVPlayerLayer设cornerRadius时，视频底层渲染的默认背景是黑色——这和图层的backgroundColor属性无关，哪怕设为clear，视频帧渲染时仍会填充黑色背景。
2. 用CAShapeLayer没实现裁剪，大概率是没把shapeLayer正确设为目标图层的mask，或者路径尺寸没和图层匹配。
3. 大borderWidth能缓解黑块，是因为border会覆盖图层边缘的黑色区域，把视频内容压缩到中间，但这是“遮丑”而非解决问题，border宽度不够时黑块会重新出现。

正确实现代码 #

import UIKit
import AVFoundation

class VideoRoundCornerView: UIView {
    private let playerLayer = AVPlayerLayer()
    
    init(videoURL: URL) {
        super.init(frame: .zero)
        setupPlayer(videoURL: videoURL)
        setupRoundCornerMask()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupPlayer(videoURL: URL) {
        let player = AVPlayer(url: videoURL)
        playerLayer.player = player
        playerLayer.frame = bounds
        playerLayer.backgroundColor = UIColor.clear.cgColor
        playerLayer.videoGravity = .resizeAspect
        layer.addSublayer(playerLayer)
        
        // 监听尺寸变化，同步更新playerLayer和mask路径
        addObserver(self, forKeyPath: "bounds", options: [.new], context: nil)
    }
    
    private func setupRoundCornerMask() {
        let maskLayer = CAShapeLayer()
        let cornerRadius: CGFloat = 20
        let path = UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius)
        maskLayer.path = path.cgPath
        maskLayer.fillColor = UIColor.black.cgColor
        // 给容器视图的layer加mask，而非直接作用于playerLayer
        layer.mask = maskLayer
    }
    
    override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
        if keyPath == "bounds" {
            playerLayer.frame = bounds
            guard let maskLayer = layer.mask as? CAShapeLayer else { return }
            let cornerRadius: CGFloat = 20
            maskLayer.path = UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius).cgPath
        }
    }
    
    deinit {
        removeObserver(self, forKeyPath: "bounds")
    }
}

关键注意事项 #

• 不要直接给AVPlayerLayer加mask：AVPlayerLayer的渲染机制特殊，直接加mask易导致裁剪失效或黑块残留，放到容器UIView后给容器layer加mask更稳定。
• 必须设置playerLayer.backgroundColor = .clear：避免图层叠加时产生额外的黑色背景。
• 监听尺寸变化：确保mask路径和图层尺寸同步，防止圆角错位。

大borderWidth缓解黑块的本质 #

当给AVPlayerLayer设置大borderWidth时，border会占据图层边缘空间，把视频内容挤压到中间——原本显示黑色背景的边缘被border覆盖，所以视觉上黑块消失。但这不是真正消除黑底，一旦border宽度小于圆角半径，边缘的黑块就会重新暴露。

内容的提问来源于stack exchange，提问作者J. Doe