利用 mask 設計特別形狀的影片

之前我們介紹過利用 UIView 的 mask 可以設計特別形狀的圖片，那麼影片可以嗎 ? 當然也可以呀， 我們現在就試試用 AVPlayerLayer 的 mask 播放心型的驚奇隊長電影預告吧。

ps: 關於 mask 遮罩的說明可參考以下連結。

利用 mask 設計特別形狀的圖片

1 在 Assets.xcassets 加入愛心的圖片。

2 Swift 程式碼。

import UIKit
import AVFoundation

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let heartImage = UIImage(named: "heart")
        let heartImageView = UIImageView(image: heartImage)
        let videoView = UIView(frame: CGRect(origin: CGPoint(x: 30, y: 50), size: heartImageView.frame.size))
        view.addSubview(videoView)
        
        let url = URL(string: "https://movietrailers.apple.com/movies/marvel/captain-marvel/captain-marvel-trailer-1_h480p.mov")
        let player = AVPlayer(url: url!)
        let playerLayer = AVPlayerLayer(player: player)
        playerLayer.frame = CGRect(origin: .zero, size: heartImageView.frame.size)
        playerLayer.videoGravity = .resizeAspectFill
        videoView.layer.addSublayer(playerLayer)
        videoView.mask = heartImageView
        player.play()
    }
    
    
}

說明

override func viewDidLoad() {

在 controller 的 function viewDidLoad 加入心型的電影，由於 viewDidLoad 將在 controller 畫面載入完成時執行，所以畫面出現後即可看到影片的播放。

let heartImage = UIImage(named: "heart")
let heartImageView = UIImageView(image: heartImage)
let videoView = UIView(frame: CGRect(origin: CGPoint(x: 30, y: 50), size: heartImageView.frame.size))
view.addSubview(videoView)

videoView 用來裝呈現影片的 layer，heartImageView 則會當 videoView 的 mask，它會將 videoView 切成心形，讓影片變成心形。

let player = AVPlayer(url: url!)
let playerLayer = AVPlayerLayer(player: player)

型別 AVPlayer 的 player 負責播放影片，但顯示到畫面上則需要型別 AVPlayerLayer 的 playerLayer。如果只有 player，我們只能聽到驚奇隊長的聲音，看不到她美麗的臉。

playerLayer.videoGravity = .resizeAspectFill

.resizeAspectFill 將讓影片佔滿 playerLayer 的長方形框框。

videoView.layer.addSublayer(playerLayer)

將顯示影片的 playerLayer 加到 videoView 上。

videoView.mask = heartImageView

videoView 原本是長方形，透過設定它的 mask 為愛心圖片 heartImageView，即可讓 videoView 切成心形，因此它顯示的影片也會變成心型，成為充滿愛的驚奇隊長。

執行 App

參考連結

如何取得 youtube 影片的網址

作品集

利用 mask 設計特別形狀的圖片&影片 ft. 《A Star is Born》