iOS10でインライン再生を実装する

iOS10でインライン再生や自動再生ができるようになったようなので、実際に試してみました。

サンプルコード

インライン再生する場合、playsinline属性を指定します。

HTML

<video  src="movie.mp4" width="320" height="180" playsinline controls></video>

インライン再生のデモページ

インラインで自動再生したい場合は、playsinline属性と合わせてmuted属性とautoplay属性を指定します。

HTML

<video  src="movie.mp4" width="320" height="180" autoplay muted playsinline></video>

インラインで自動再生のデモページ
muted属性は動画自体が無音の場合は設定しなくてもいいようです。
　

【参考サイト】

• iOS10からiPhoneのSafariでHTML5のVideoをインラインで再生可能&無音なら自動再生も！ | スターフィールド株式会社
• iOS10のiPhoneのmobile Safariではビデオ要素（videoタグ）をインラインで再生できるようになったし、無音のビデオなら自動で再生できるようになった模様 – みかづきブログ その3
• iOS10 Mobile Safariにおけるビデオの自動再生 – Qiita