スマホでも動画をインライン で自動再生させる方法

twitter や instagram など、投稿に埋められた動画が自動再生されます。いちいち全画面にしないでも動画が閲覧できるのはとても便利です。

動画をスマホでインライン & 自動再生させられることで、ウェブデザインの幅も広がります。ウェブサイトでも、動画がインラインで自動再生されるように実装する方法をご紹介します。

対応状況

iOS10から動画のインライン再生に対応しています。それ以前のものでは動画はインライン再生されませんので要注意。

android は以前からインライン再生に対応しているようです。

Google Developers

iPhone の safari では動画を再生するとフルスクリーンになりますが、Android では デフォルトではインラインで動画を再生します。

https://developers.google.com/web/fundamentals/media/video?hl=ja

実装方法

動画を自動再生させるためには、 video 要素に autoplaymuted を記述します。

さらに、iOSで動画をインラインにするためには video 要素に playsinlineと記述を追加します。

HTML

<video autoplay muted playsinline></video>

実装例

こんな記事も読まれています

投稿はありません。

もう記事がありません

エラーが発生しました

もっと表示する

ウェブ開発へのお問い合わせはこちらから

ウェブサイトやアプリ開発をしております。
どんなものを作りたいのかを明記した上でお問い合わせをお願いします。
また、簡単な質問や要望も受け付けています。まずはお気軽にお問い合わせください。

  • 入力必須です。
  • 入力必須です。
  • メールアドレスの形式で入力してください。
  • 入力必須です。
OR

お問い合わせを送信しました。
24時間以内に返信させていただきますので、しばらくお待ちください。
お問い合わせありがとうございました。

送信に失敗しました。
何度も失敗するようでしたら、こちらからお問い合わせください。