[iOS] iOSアプリにYouTube 動画を埋め込み、インライン再生させる

前提条件

以下の環境で実行しています。

Xcode 12.0
iOSシミュレータ: iOS14系

HTML と JavaScript で埋め込むか、Swift で埋め込むか

公式のリファレンスを元に埋め込みます。
方法は大きく分けて2つ。

Swift で埋め込む方法はYouTube のライブラリを使って埋め込むのですが、
その中で結局WebView を作っているようです(要はJavaScript 版のラッパーのよう)。
しかしドキュメントは充実しておらず、YouTube 側もあまり力を入れている訳ではなさそうだし、
ちょろっと書かれたドキュメントを見る限り柔軟な使い方はできなさそう。

HTML と JavaScript で埋め込む、に決めた！

という理由により、HTML と JavaScript で直接コードを書いて埋め込んでいきます。

WKWebView を用意

まずWKWebView を準備します。
storyboard や xib ではなく、直接コードにより作っていきます。
コードの方が色々小回りが効くので、今回はこちらの方が良い気がします。

let config = WKWebViewConfiguration()
config.allowsInlineMediaPlayback = true
let webView = WKWebView(
    frame: CGRect(x: 0, y: 0, width: 640, height: 360),
    configuration: config
)
view.addSubview(webView)

ここでポイントなのが、config.allowsInlineMediaPlayback = true の箇所。
これを指定しないと、YouTube動画がインライン再生されず、
再生ボタンをタップした瞬間に全画面再生になってしまいます。

そのためにはWKWebViewConfiguration を WKWebView にセットする必要があるのですが、
storyboard や xib で生成し終わったWKWebView に後からセットできるのかは謎🤔

空のHTMLファイルを作成し、WKWebView に読み込ませる

次に、空のHTMLファイルを作ります。
適当に「index.html」という名前でXcodeプロジェクト内に作成します。

で、以下がWKWebView に読み込ませるコード。

guard let path: String = Bundle.main.path(forResource: "index", ofType: "html") else {
    return
}

let localHTMLUrl = URL(fileURLWithPath: path, isDirectory: false)
webView.loadFileURL(localHTMLUrl, allowingReadAccessTo: localHTMLUrl)

特に言うことはありません。

次はいよいよ本題であるHTML と JavaScript を記述します。

HTML と JavaScript でインライン再生をさせる

といっても、とりあえず動画を再生させるだけなら、公式リファレンスのコードをHTMLに貼り付ければ動きます。
ただ、再生ボタンを押すと全画面再生になってしまうと思います。

インライン再生させるためには、JSでのプレーヤー初期化時にパラメータを渡してやる必要があります。
playsinline というパラメータに1を指定して渡します。

どうやって渡すか。
プレーヤー初期化時に playerVars というオブジェクト経由で渡します。
リファレンスのコードにはそれが書いてない(文章では書いているけど、サンプルコードには書いてない)ので最初混乱しましたね！

というわけでプレーヤー初期化する箇所の抜粋コード。

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '360',
        width: '640',
        videoId: 'M7lc1UVf-VE',
        playerVars: {
            playsinline: 1
        },
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

これでインライン再生が可能になりました！

他にも初期化時に渡せるパラメータはたくさんあって playerVars 経由で渡せます。
それによりもう少し動画の挙動や見た目を制御できます。

で、「自動再生」や「次の動画を指定して再生」や「バックグラウンド再生」などを試してみたいのですが、
長くなりそうなので今回はここまで。

最後に

以上です。お疲れ様でした！