スマホで無音動画を使用する方法

iPhoneで背景動画や無音のデモ動画を再生する方法について触れて行きます。

kinko25

1 minute read

スマホで無音動画を使用する方法

さようなら、GIFアニメーション

担当案件が全部片付いたので、久々の更新となります。

今回は、iphoneで動画を再生する方法について書きます。

担当した案件で PCサイトでは動画を使用し、 SPサイトではGifアニメーションを使用していたサイトがありました。

スマホ(主にiPhone)で、動画が使えなかったという理由で 前任の担当者はGifアニメーションを使用していたようです。 ※Androidでは、普通に再生できていました。

Gifアニメーションを2つ読み込んでいるせいで、 サイトはめっちゃ重たくてかなりのストレスでした。

videoタグに一手間加えるだけ。

下記、サンプルソースをご覧頂ければわかるかと思いますが、 「playsinline」というのをvideoタグに追加しています。 見たことないですよね。 「playsinline」が無いと、iPhoneではそもそも表示すらしてくれません。

サンプルソース:

HTML:
<video playsinline muted autoplay loop>
  <source src="movie/sample.mp4" type="video/mp4">
</video>

最後に

「playsinline」を追加するだけで解決できるので、 スマホサイトでも動画を使用したい場合に試してみてください。 解説付きで、もっと詳しく知りたいという方は下記のリンク先でご覧ください。

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

https://qiita.com/tomoyukilabs/items/cb9dd1d3e7eb0cc7f58a