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 src="hoge.m3u8"></video>
- 全画面で再生スタートする
- ピンチインするか全画面ボタンをタップすると、プレイヤー画面が縮小してインライン表示になる
Mobile Safariでインライン再生させる記述方法
<video src="hoge.m3u8" playsinline></video>
- 再生開始時にインラインで再生開始する
- ピンチアウトするか全画面ボタンをタップすると、全画面再生になる
インライン再生で自動再生させる
前提として、インラインかつ自動再生をさせるには、Apple社によると以下いずれかの条件が必要。
- Audio Trackが無い動画であること
- Audio TrackをDisableすること
<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' だけで動くようになってるかも？なっていないかも？