Web-y.dev

目次

1. 前提条件
2. まずYouTube をWKWebView の中に埋め込む方法
3. 自動再生させる
   1. YouTube ライブラリで用意されている autoplay について
   2. 通常のブラウザで自動再生をさせる方法
4. 別の動画を再生させる
5. 最後に

前提条件

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

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

まずYouTube をWKWebView の中に埋め込む方法

以前の投稿 [iOS] iOSアプリにYouTube 動画を埋め込み、インライン再生させる に書いています。

ということで、以降は自動再生と別の動画を再生させる方法を書いていきます。

自動再生させる

iOS側とJavaScript 側両方に少しコードを追加するだけで可能です。

まずiOS側。
WKWebViewConfiguration に設定をし、それをWKWebView に読み込ませます。
追加する設定はこちら

config.mediaTypesRequiringUserActionForPlayback = []

再生させるためにユーザのアクション(タップなど)を必要とする、というプロパティがあるのですが、
そこに空配列を設定します。
ここの値には、.audio、.video、.all を格納することができますが、
デフォルトでは .video のみが設定されているようです。
なので、ここに空配列を設定することにより、アプリとしては自動再生可能な状態にできます。

次にJavaScript 側。

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
    event.target.playVideo();
}

このように、動画再生準備完了のイベントハンドラに、再生メソッドを記述するだけです。

上記2点を設定すれば、動画の自動再生機能が実装できます！

YouTube ライブラリで用意されている autoplay について

公式リファレンスにはプレーヤー初期化時に渡せるプロパティとして autoplay がありました。
これは、今回のようにWKWebViewConfiguration に設定している状態では不要でした。
Safari や Chrome などの通常のブラウザでは必要となる設定のようです。

通常のブラウザで自動再生をさせる方法

補足ですが、通常のブラウザの場合は「音声を出しつつ」「自動再生させる」ことはできません。

• muted 属性が設定されていれば autoplay 属性は有効になります。
• muted 属性が設定されていなければ autoplay 属性は無効になります。

つまり、自動再生させるなら音声は出せず、音声を出すなら自動再生できません。
このあたりはMDN Web docs のvideo タグについてのドキュメントが参考になりそうです。

音量周りは volume とかを変更してもいけるかもしれません。(試してない)

YouTube ライブラリで自動再生をする場合は2箇所修正を入れれば実現できます。(ただし上記の通り音声は出ません)

1. プレーヤー初期化時の playerVars に autoplay: 1 を設定
2. 動画再生準備完了のイベントハンドラに、ミュートメソッドと再生メソッドを記述(以下記述)

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
    event.target.mute();
    event.target.playVideo();
}

別の動画を再生させる

次に別の動画に差し替える方法です！

JavaScript で操作します。
Player を都度初期化しても実現できると思いますが、より適しているのは loadVideoById のようです。
これをするとプレイヤーの初期化処理が走らないので、おそらく無駄な処理を省くことができそうです。

本ポストは以上です！

バックグラウンド再生についても書きたかったのですが難しそうなので、というかできるのか…？？
という感じなので、別にまとめます。

最後に

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

目次

1. 前提条件
2. HTML と JavaScript で埋め込むか、Swift で埋め込むか
3. HTML と JavaScript で埋め込む、に決めた！
4. WKWebView を用意
5. 空のHTMLファイルを作成し、WKWebView に読み込ませる
6. HTML と JavaScript でインライン再生をさせる
7. 最後に

前提条件

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

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

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

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

• WKWebView を用意して、その中にHTML と JavaScript で埋め込む
• Swift で埋め込む

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 経由で渡せます。
それによりもう少し動画の挙動や見た目を制御できます。

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

最後に

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