DACエンジニアブログ:アドテクゑびす界

DACのエンジニアやマーケター、アナリストが執筆するアドテクの技術系ブログです。

Safari10(iOS10)のインライン動画再生についてまとめてみた

はじめに

Safari10からvideoタグを用いたインライン動画再生ができるようになったので、挙動を調べてみました。

Safari 10.0

検証環境

項目 詳細
開発環境 Xcode8.0
検証端末 iPhone7 Simulator
ブラウザ iOS Safari / UIWebView / SFSafariView
再生動画 http://ad-tech-study.com/video/DAC-FRUITSBEAR.mp4

※実機ではまだ確認してません。

検証結果

video属性を変えてそれぞれのブラウザを挙動を確認しました。

結果は以下のスプレッドシートにまとめました。

検証結果まとめ

1シート目にUseragentをまとめています。 2シート目に挙動をまとめています。

考察

結果からわかる通り、最初からインライン再生可能なのは、 iOS Safariのvideo属性にautoplay/playsinline/mutedがついている場合のみでした。

Tap2Playでインライン再生で問題なければ、playsinline/muted属性だけでも動きそうです。

UIWebViewとSFSafariViewのインライン動画再生は、 video属性によって多少挙動が変わるものの、基本的に最初からインライン再生させることはできませんでした。

プログラム

html

video.html

UIWebView


UIWebView *webview = [[UIWebView alloc] init];
    
CGRect r = [[UIScreen mainScreen] bounds];
CGFloat w = r.size.width;
CGFloat h = r.size.height;
    
webview.frame = CGRectMake(0, 0, w, h);
    
NSURL *url = [NSURL URLWithString:@"http://webdemo.dac.co.jp/infeed/dac_video.html"];
NSURLRequest *req = [NSURLRequest requestWithURL:url];
[webview loadRequest:req];
    
[self.view addSubview:webview];

SFSafariView


NSURL *url = [NSURL URLWithString:@"http://webdemo.dac.co.jp/infeed/dac_video.html"];
SFSafariViewController *safari = [[SFSafariViewController alloc] initWithURL:url];
safari.delegate = self;
[self presentViewController:safari animated:YES completion:NULL];

※UIWebViewとSFSafariViewを試す場合は、ATSを無効にしてください。