目次
前提条件
以下の環境で実行しています。
- 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箇所修正を入れれば実現できます。(ただし上記の通り音声は出ません)
- プレーヤー初期化時の
playerVarsにautoplay: 1を設定 - 動画再生準備完了のイベントハンドラに、ミュートメソッドと再生メソッドを記述(以下記述)
// 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 のようです。
これをするとプレイヤーの初期化処理が走らないので、おそらく無駄な処理を省くことができそうです。
本ポストは以上です！
バックグラウンド再生についても書きたかったのですが難しそうなので、というかできるのか…？？
という感じなので、別にまとめます。
最後に
以上です。お疲れ様でした！
Web-y.dev 