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

SFSafariView

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


DACエンジニア採用情報

  関連記事

forest
ActiveDirectoryをフォレスト間で移行する(その1)

こんにちは。DACインフラ開発部の福本です。 多くの企業のユーザー管理に使われているであろうActiveDirectory(以下、ADと略します)ですが、 もちろん当社でもADを使用してユーザーや各種認証の連携を行っています。 当記事は、ドメインの管理・運用を考慮して、子ドメインを新規フォレストに移 …

プログラミング
ES5とES6でアドタグを作ってみた

はじめに アドテク問題(広告表示編)のQ7を元にネイティブ広告を表示するアドタグをES5とES6で作ってみました。 処理の流れ 大きな処理の流れは以下の通り 広告要素取得処理 サーバからタイトル/説明文/画像URLの取得を行う フォーマット処理 取得した要素を表示するページに最適化した形にフォーマッ …

IMG_4673
Ad Tech Conference~海外アドテク系カンファレンスに行ってきた②~

はい、テクノロジー戦略部の田畑です。 アドテク系イベントに行ってきた②ということで、前回書ききれなかったところを書きます。   ~前回のおさらい~ 1.11月にNYのアドテク系イベント3つに行ってみた。 2.Fraud、Viewability、Programatic Directがキーワー …

no image
SafeFrameでリッチ広告をセキュアに実現

アドサーバ(広告配信サーバ)は、通常iframeで広告のクリエイティブを配信している。(JS配信とかに対応しているアドサーバもある) 通常のセキュリティだとiframeの中身(srcで実際に表示されている側)がiframeを操作する事はできない。つまりexpandなどのリッチ広告、特に表示領域を変更 …

6914441342_605f947885
Treasure Dataの新機能(Data Tank)をAudienceOneのレポート機能で利用した話

Data Tankとは? Treasure Dataの新機能でTreasure Dataのプラットフォーム上に構築されたデータマートです。 Tableau等のBIツールとの接続を想定されており、AWSでいうところのRedshift的なものだと考えるとわかりやすいかと。 Data TankはPostg …

videojs
video.jsを使ったインバナー動画広告のHTMLタグを作ってみた

こんにちは、プラットフォームワンのyamakenです。久しぶりの投稿です。 今回は、 インバナー動画広告 のHTMLタグを作ってみます。 「今年は動画広告元年!」という声が私の入社以来毎年聞こえており、私の担当するMarketOneDSPでも年始にインストリーム動画RTB対応をリリースするなど、市場 …

20140922035644
アドテク問題(広告表示編)

アドテクエンジニア向けの問題を考えました。 お題は「広告表示」です。 以下お題に沿った「アドタグ」を作成し、広告を表示してみてください。 全部で9問あるので、興味のある人はやってみてください。 難易度は、ちょうどいいくらいです。 全部できた人は、採用担当までご連絡ください。 Q1.バナー広告を表示し …

new-york-city-828776_1280
ネイティブ広告と記事広告の違いってなに?!

こんにちは、プラットフォーム・ワンの新卒1年目Yukaです!! ここ数年よく耳にし、さまざまな媒体で目にするネイティブ広告。 しかし、今までの記事広告といったいなにが違うのー?!?!?! ということで調べてみました。 ネイティブ広告(Native Ads) デザイン、内容、フォーマットが、媒体社が編 …

forest
ActiveDirectoryをフォレスト間で移行する(その2)

こんにちは。インフラ開発部の福本です。 2015年も残り約半分ですね。ボーっとしていると、あっという間に日々が過ぎていきます。 その中、少しずつ迫るWindowsServer2003のサポート期限。 保守切れとなるサーバOSの移行に忙殺されているサーバ管理者の方も、いらっしゃるのではないでしょうか。 …

dockerlogo
自社サービスのDocker化(後編)

こんにちは。 インフラ開発部の上田です。 前回、前編としてDockerについて書き、早半年も経ちました。 前編はこちらです 今回は後編として、以下について書いてみたいと思います。 ■複数プロセス起動 前編で書いた通り、通常のOS起動時とは異なり、コンテナ上で個別にプロセスを起動する必要があります。 …