Help us understand the problem. What is going on with this article?

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' だけで動くようになってるかも?なっていないかも?

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away