前回、iPhoneでウェブページ上でVideoをインライン再生する方法を紹介いたしましたが、
iOS10から、正式に、SafariでHTML5のVideoをインラインで再生できるようになりました。

また、無音の設定をすれば、自動再生も許可されるようになりました。

↓参考記事

モバイルブラウザのビデオ再生がいろいろ変わるので確かめてみた – Qiita

iOS10のiPhoneのmobile Safariではビデオ要素（videoタグ）をインラインで再生できるようになったし、無音のビデオなら自動で再生できるようになった模様 – みかづきブログ その3

HTML5からVideoタグが利用できるようになり、動画を使ったサイトが作りやすくなりました。

しかし、iPhoneでの操作の制限(自動再生できない、再生するときに強制的に全画面になる)の問題で、
スマホ向けサイトでは、HTML5でのVideoの利用方法が、制限されてきました。

しかし、今回のiOS10での変更でVideoのインライン再生と、無音の場合の自動再生が可能になったことで、ウェブページ上でのVideoの利用方法が広がって、動画をより自由に使ったサイトが増えそうです。

方法

DEMO

インライン再生

videoタグに「playsinline」属性をつける。

 

無音での自動再生

videoタグに「muted」属性と「autoplay」属性をつける。

 

ただ、iOS10のSafari、Android4系の標準ブラウザではこの方法が使えるのですが、
Chromeの場合、Andriod上ではインライン再生のみ可能、iOS上では、インライン再生、自動再生共に対応していないようです。

とはいえ、iOSのSafariで可能になったことから、Chrome上でも使える日は遠くはないのではないでしょうか。