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エンジニア採用情報

  関連記事

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

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

cookie
【DMP】クッキー連携ってなに

  アドテクに関わる方であれば、必ず耳にするであろう「クッキー連携」をシンプルに説明してみようと思います。 クッキー連携は cookie sync(クッキーシンク、cookie synchronization の略)と呼ばれることも多いです。 Googleは cookie matching …

no image
【動画広告】VASTって何?

こんにちは、FlexOne推進部の近江です。 私は新卒入社2年目でアドサーバーや動画ソリューション(OVP)のサポート、開発を担当しています。 今回は動画広告のプロトコル「VAST」について書かせて頂きます。   ここ数年動画のくるくる詐欺がありましたが、昨年はHulu、ユーチューバー、見 …

20140930220910
AudieneOneでアドブロック利用者を抽出する訪問者セグメントを作ろう

はじめに iOS 9のコンテンツブロッカーによって盛り上がったアドブロック論争。アドブロック自体はPCブラウザ用プラグインで昔からできていたことなのですが、さらに普及していくのかもしれません。 アドブロックの仕組みが普及するのはインターネット業界全体の損失につながりかねない話ではあるのですが、その一 …

playlist
解説、VMAP!

どうも動画といえば僕です。Rhiannonです。 前回、前々回と動画ファイル自体についての記事を書きましたが、今回はVMAPについて解説しようと思います。 VMAPって聞いた事あるけど仕様書が英語だし読むの大変だと思っていた方の理解の一助になれば幸いです。   VMAPとはなんぞや? VM …

Chrome
アドブロッカーに対抗してアドチェッカーを作ってみた

iOS9のSafariでコンテンツブロック機能が登場し、サイト上の広告を非表示にするアドブロックの存在が世に広まりました。 これを機にCrystalを始めとする数々のアドブロッカーアプリが登場しています。 PCブラウザでもAdblock Plusを始め、ブラウザの拡張機能で広告を非表示にして表示速度 …

image2
自社サービスのDocker化(前編)

こんにちは。 インフラ開発部の上田です。 普段は自社開発システムのインフラ担当として、日々頑張って仕事をしています。 今回は、近年話題になっているDockerについて、取り上げてみようと思います! なぜDockerなのか・・・? そもそもDockerとは何か・・・?   当社では様々なサー …

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

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

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

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

gtm
【タグマネジメント】GoogleTagManagerでイベントリスナーを使う

タグマネジメントとは タグマネジメントとは、広告効果測定ツールや、サイト解析ツールなどで利用している『HTMLタグ』の管理を行うことをいいます。 タグマネジメントツールでは、Webサイトの全ページに各タグマネジメントツールが発行する1つのタグを設置するだけで、あらゆるHTMLタグを管理画面上で登録す …