iOS10のWKWebViewではビデオのインライン再生はできない→できます！

2016/10/28追記：初回投稿時に「iOS10のWKWebViewではビデオのインライン再生はできない」として作成した記事ですが、その後の検証によりインライン再生できることが分かりました。

そのため現在の内容は初出時の内容を一部修正したものになっています。ご了承ください。

iOS 10からmobile Safariでビデオをインライン再生できるようになりました。<video>タグにplaysinlineを指定することで、ビデオがインラインで再生されるようになります。

developer.apple.com uupaa.hatenablog.com

同じことがWKWebViewでできないかを確認してみた~~のですが…残念ながらまだできませんでした。~~ところ、同様にインライン再生出来ることが分かりました。

確認した環境は以下のとおりです。

iOS 10.0.2 (14A456)
iPhone 6

ソースコードは以下のとおりで、WKWebViewConfigurationを用意しそのallowsInlineMediaPlaybackプロパティをtrueにしているのがポイントです。

let config = WKWebViewConfiguration()
config.allowsInlineMediaPlayback = true // ⭐ここがポイント！

let webView = WKWebView(frame: self.view.frame, configuration: config) // configと共にインスタンス化
self.view.addSubview(webview)

let url = URL(string: "ここにvideo＋playsinlineなURLを入力")
let request = URLRequest(url: url!)
self.webnavigation = self.webview?.load(request)

HTML側のコードは以下のとおり。こちらのサイトにあるコードを使わせてもらっています。

github.ioなどを使って公開すると簡単にhttpsで公開できるので楽チンです。

<video>の中にplaysinlineと、念のためのwebkit-playsinlineがありますが、これがiOS10（のSafari）でインライン再生するために必要な属性です。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
  content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="utf-8">
</head><body>

<video
  src="http://devimages.apple.com.edgekey.net/streaming/examples/bipbop_4x3/bipbop_4x3_variant.m3u8",
  controls
  playsinline
  webkit-playsinline
  style="position:absolute;top:0;left:0;outline:1px solid red;width:320px">
</video>

<p style="position:absolute;top:100px;left:10px;color:lime">
Hello inline player
</p>

</body></html>

で、これを確認するとmobileSafariと同様にインラインで再生してくれます。あれだけ苦労していたインライン再生が、いとも簡単にできてしまいました。

余談

ちなみにWKWebViewを２つ並べて再生してみたのですが、それだと片方ずつのガクガクな再生になってしまいました。高望みしてはいけませんね。