MacOS向けのAppを制作しています。
動画を再生する機能をつけたところ横に帯が出てしまいました。
（下記画像：紫のボーダーの内側左右に黒い帯が出てしまっている）
調べたところ、iOS向けにこれを消す記事があったのですがMacOSではこれが使えなかったので、試してみたことを記事に残しておきます。
この記事のことをやるとした画像のようになります。角丸を飛び越えてしまってるので調子が必要そう…。
まず、動画の準備から始めます。再生したい動画ファイルをプロジェクトに追加し、そのURLをAVPlayerにセットします。
import SwiftUI
import AVKit
struct VideoView: View {
private let player = AVPlayer(url: Bundle.main.url(forResource: "HowToSetIcon", withExtension: "mov")!)
var body: some View {
PlayerView(player: player)
}
}
次に、AppKitの力を借りて、NSViewRepresentableを使用してAVPlayerViewをラップします。これにより、動画がビュー全体にフィットするように調整できます。
struct PlayerView: NSViewRepresentable {
let player: AVPlayer
func makeNSView(context: Context) -> NSView {
let playerView = AVPlayerView()
playerView.player = player
return playerView
}
func updateNSView(_ nsView: NSView, context: Context) {
// none
}
}
class AVPlayerView: NSView {
var player: AVPlayer? {
didSet {
(self.layer as? AVPlayerLayer)?.player = player
}
}
override init(frame frameRect: NSRect) {
super.init(frame: frameRect)
self.wantsLayer = true
}
required init?(coder: NSCoder) {
super.init(coder: coder)
self.wantsLayer = true
}
override var layer: CALayer? {
didSet {
guard let layer = self.layer as? AVPlayerLayer else { return }
layer.videoGravity = .resizeAspectFill
}
}
override func makeBackingLayer() -> CALayer {
return AVPlayerLayer()
}
}
これで、動画がフルスクリーンで表示され、再生や停止のUI部品は表示されません。これにより、動画の横に黒い帯が表示される問題を防ぐことができます。
SwiftUI標準のプレイヤーだとホバー時に再生停止ボタンと、シークバーが標準で付いているので、AppKitを使ってしまうとそれを自分で構築しなければならないので大変…。
最初にも書いたけど、CornerRadiusかけたときに切り取れるようにする方法がわからない。
結局動画編集して比率を変更してAspectRatioを指定することにした。コードで切り取っていい感じにするのは諦めた…。
VideoPlayer(player: player)
.aspectRatio(4 / 3, contentMode: .fit)
coiai
この記事もおすすめ
株式会社coiaiは、「想像できることを美しく実現」を掲げ、XR・Web・アプリ・システム開発およびDX支援を行う会社です。 創業2022年、東京都練馬区に本社を置き、要件のヒアリングからPoC（概念実証）、本番運用まで一貫して伴走します。 まずはお気軽にご相談ください。
主なご相談内容
詳しい会社情報は会社概要ページでご覧いただけます。
