【HTML】videoタグの設定：自動再生ができない時【autoplay】

videoタグ自動再生の正解コード

videoタグを下記のように書くと自動再生が行われます。

<!-- 動画 -->
<video class="home-fv_video" loop autoplay muted>
  <source type="video/mp4" src="<?php echo get_template_directory_uri(); ?>/image/home-fv-pc.mp4">
  <source type="video/webm" src="<?php echo get_template_directory_uri(); ?>/image/home-fv-pc.webm">
</video>

注意点

autoplayはmutedとセットで自動再生される

autoplayはmutedとセットで記述しないと自動再生されない（mutedが書かれてないと自動再生されない）

<video class="home-fv_video" autoplay muted>

正確にはmutedが記述されてなくてもブラウザーをリロードすれば自動再生（autoplay）が開始されますが、初回、そ動画を含むWEBページを読み込んだ場合には自動再生されません。

さらにmutedが無く、且つcontrolsが記述されている場合には、下記のように再生ボタンやバー等が表示された状態で動画が停止したまま表示されるため、ファーストビューなどに使用した場合に見た目を著しく損ないますので注意して下さい。

<video class="home-fv_video" loop autoplay controls>

loopを合わせて記述すると、繰り返し再生

さらにloopを合わせて記述すると、繰り返し再生が行われるようになります。

つまり、ファーストビューに使うvideoタグは、下記のように「loop autoplay muted」の３セットが基準になると思います。

<video class="home-fv_video" loop autoplay muted>

controlsは使い所を考える

再生ボタンなどの動画コントローラーを表示させるcontrolsは、コンテンツ内の説明に使う動画には有効だと思います。しかし、上でご紹介したようにイメージを大切にするファーストビュー等では必要ない場合が多いです。

つまり、controlsをvideoタグに含める場合には、その動画の使用目的をよく考える必要があります。

iOSの場合はさらに注意が必要

iOSでは、autoplayとmutedをセットで記述して再生されないことが多いです。

iOSのSafariで自動再生が行われない理由は、セキュリティとプライバシー保護のためにAppleが設定した制限によるものです。この制限は、ユーザーが明示的に再生を許可しない限り、ウェブサイトのメディアコンテンツが自動再生されないようになっています。これは、データ通信量の節約やプライバシー保護などを目的としています。

この対策はいくつかありますが、確実に自動再生が行われるかは不明です。

対策の一つにplaysinline 属性を追加する方法があります（この方法も確実とは言えません。）

<video class="home-fv-sp_video" loop autoplay muted playsinline>
  <source type="video/mp4" src="<?php echo get_template_directory_uri(); ?>/image/home-fv-sp.mp4">
  <source type="video/webm" src="<?php echo get_template_directory_uri(); ?>/image/home-fv-sp.webm">
</video>

SIM

たしかにユーザーの立場を考えると、動画が勝手に自動再生されるのは好ましくないかもしれませんね。

結論としては、ファーストビューに動画を使わないデザインがを選ぶことが長い目でみても適切だと言えます。実際、ファーストビューが動画のサイトは少数派ですし、よほど意味のある動画でもない限りは再生したいと思うユーザーは少ないのではないでしょうか？