こんにちは、MIO webデザインです。

さて、ネットサーフィンをしていると、時々ヘッダー部で動画が自動再生しているサイトを見かけませんか？　動画は視覚的に人の目を惹きつける効果があるので、使い分けたい技術の一つですよね。

そこで今回はvideoタグで動画を自動再生する方法について書いていこうと思います！

動画を自動再生させるためのコード

動画を自動再生させるためのvideoタグは次の通りです。

<video preload="auto" playsinline muted autoplay loop>
  <source src="mov/mov.mp4" type="video/mp4">
  <img src="mov/thumbnail.jpg">
</video>

これだけです。

自動再生させたいので、videoタグの属性にautoplayを指定。動画をループさせたいのならばloopも指定しておきましょう。また、スマホでも自動再生させたい場合はmutedを指定しましょう。スマホでは消音にしないと動画は自動再生されないようですので。

また、こちらは自動再生とは関係ありませんが、何らかの理由で動画が再生できない場合に備え、サムネイル画像も用意しておくのが得策です。

<img src="mov/thumbnail.jpg">

注意点

動画の自動再生はギミック的には大変素敵ですが、動画コンテンツを扱うため読み込みに時間がかかることがあります。

特にスマホユーザーにとっては「読み込みに時間がかかる」「勝手に動画が再生される」というのはストレスの一因になるため、注意して使用する必要があるかもしれませんね。