twitter や instagram など、投稿に埋められた動画が自動再生されます。いちいち全画面にしないでも動画が閲覧できるのはとても便利です。
動画をスマホでインライン & 自動再生させられることで、ウェブデザインの幅も広がります。ウェブサイトでも、動画がインラインで自動再生されるように実装する方法をご紹介します。
対応状況
iOS10から動画のインライン再生に対応しています。それ以前のものでは動画はインライン再生されませんので要注意。
android は以前からインライン再生に対応しているようです。
Google Developers
iPhone の safari では動画を再生するとフルスクリーンになりますが、Android では デフォルトではインラインで動画を再生します。
https://developers.google.com/web/fundamentals/media/video?hl=ja
実装方法
動画を自動再生させるためには、 video 要素に autoplay と muted を記述します。
さらに、iOSで動画をインラインにするためには video 要素に playsinlineと記述を追加します。
HTML
<video autoplay muted playsinline></video>
