HTML5
iOS
Safari
Video
ios10

iOS10 Mobile Safariにおけるビデオの自動再生(インライン再生)

More than 1 year has passed since last update.


iOS 10で変わったこと

これまでのMobile Safariでは、HTML<video>タグでembedした動画を自動再生させることができませんでした。これはHTML5ではなくApple社による制約事項です。

そのため、アウトストリーム動画広告(インフィード, インバナー等)ではCanvasにレンダリングするなど、<video>タグを使用しないワークアラウンドが一般的でした。

これがiOS10からは、条件付で<video>タグを自動再生できるようになりました。

https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html


記述例


デフォルトの挙動


標準的な<video>タグ記述

<video src="hoge.m3u8"></video>



  • 全画面で再生スタートする

  • ピンチインするか全画面ボタンをタップすると、プレイヤー画面が縮小してインライン表示になる


Mobile Safariでインライン再生させる記述方法


'playsinline'attributeを追記

<video src="hoge.m3u8" playsinline></video>



  • 再生開始時にインラインで再生開始する

  • ピンチアウトするか全画面ボタンをタップすると、全画面再生になる


インライン再生で自動再生させる

前提として、インラインかつ自動再生をさせるには、Apple社によると以下いずれかの条件が必要。


  • Audio Trackが無い動画であること

  • Audio TrackをDisableすること


さらに'muted'と'autoplay'attributeを追記

<video src="hoge.m3u8" playsinline muted autoplay></video>



  • 自動的にインラインで再生開始する

  • ただし音声は無音になる


  • 再生開始後にミュートを解除したりボリュームを上げても**無音状態は解除できない**


参考:無音状態を解除する(アンミュート)

無音状態の解除は、動的にAttributeを変更しても解除できませんでした。

あくまでも個人的な推測ですが、これはApple社による最後の砦として残された仕様なんじゃないかと。メディア媒体の都合で自動再生を許可することにより、ユーザーからしてみれば極端にUXが落ちることになるわけです。

ユーザが視聴したくもない動画をメディア都合で再生させるばかりか、簡単にアンミュートさせることができたらと思うと恐ろしい。

(2018/3/26 追記)

iOS 10のマイナーバージョンアップもしくはiOS 11から、 'muted' の動画でもユーザーが任意にUnmuteすることができるようになりました。

現在は 'playsinline muted autoplay' と書いておけば問題ありません。


参考:Audio Trackなしの動画で自動再生する

iMovieでAudio Trackを削除したものを 'muted' Attributeの追記なし で試してみましたが、なぜか自動再生できませんでした。

厳密にどういうときに「Audio Trackなし」という条件が成立するのか…?


iOSアプリ WebViewでの対応方法

iOS App webviewでは 'allowsInlineMediaPlayback' を有効にする。

HTML側でいくら 'playsinline' を記載していても、これが有効になっていないとインライン再生にならない。FacebookアプリとかGmailアプリのWebビューで動画がインラインにならないのはこのため。対応はよ。

(2018/3/26 追記)

しばらく検証していないので 'playsinline' だけで動くようになってるかも?なっていないかも?