iPhone に搭載されている Safari上でのインライン動画再生について調べる機会があったので、まとめました。
～iOS9
iOS9などiOS10より前のiOSに搭載されたSafarではインライン動画再生は許可されておりません。必ずフルスクリーンでの再生となります。(iPadではインライン動画再生可能です。)
iPhoneでインライン再生を行うにはWebViewアプリを作成し、インライン動画再生オプションを有効にする必要があります。
具体的には WebView (UIWebView) にはallowsInlineMediaPlayback と呼ばれるオプションが用意されており、このオプションを有効にし、かつHTMLコンテンツの動画に webkit-playsinline プロパティを追記することで、インライン動画再生が可能となります。
※ allowsInlineMediaPlayback は iOS 4 (2010年6月にリリース) にて追加されました。
アプリ側 (Swift) の記述例
class ViewController: UIViewController {
@IBOutlet weak var webview: UIWebView!
var url:String = "http://labs.irohasoft.com/inline"
// loadURL関数を定義
func loadURL() {
let requestURL = NSURL(string: url)
let request = NSURLRequest(URL: requestURL!)
webview.allowsInlineMediaPlayback = true
webview.loadRequest(request)
}
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
loadURL()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
HTML側の記述例
<video controls autoplay src="sample.mp4" webkit-playsinline></video>
iOS10以降
iOS10では(2016年8月現在まだリリースされていませんが) Safariにインライン動画再生機能が使用できるようになるため、アプリは必要なくなります。
ただし、HTMLコンテンツ側に playsinlineプロパティの追加を行う必要があります。
<video controls autoplay src="sample.mp4" playsinline></video>
実際に iOS10 Simulator上で、上記のコードのHTMLファイルを作成し、インライン動画再生されること確認致しました。
追記
2016.9.14 iOS10がリリースされたため、実機でテストしたところ、「webkit-playsinline」プロパティではなく、「playsinline」プロパティによってインライン動画再生されることが確認できました。
参考
Apple : Guides and Sample Code : Safari 10.0
https://developer.apple.com/library/prerelease/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html
iOS10はiPhoneのSafariで動画のインライン再生をサポート
http://news.livedoor.com/article/detail/11647560/
サンプル
http://labs.irohasoft.com/inline/