iOS10 Mobile Safariにおけるビデオの自動再生

  • 37
    いいね
  • 0
    コメント

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が落ちることになるわけです。
ユーザが視聴したくもない動画をメディア都合で再生させるばかりか、簡単にアンミュートさせることができたらと思うと恐ろしい。

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

iMovieでAudio Trackを削除したものを 'muted' Attributeの追記なし で試してみましたが、なぜか自動再生できませんでした。
厳密にどういうときに「Audio Trackなし」という条件が成立するのか…?

iOSアプリ WebViewでの対応方法

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

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