動画ファイルを自動再生する

動画ファイルの自動再生について

ページの読み込み完了したタイミングなどに動画ファイルを自動再生するときは、video要素にautoplay属性をつけるか、autoplayプロパティをtrueに設定します。
ただし、現在の主要ブラウザでは自動再生によって勝手に音が出てしまうことを防ぐために、以下の条件のうちいずれも該当しない場合は自動再生ができない設定になっています。

• 音量0、または消音（ミュート）
• ブラウザで自動再生を許可（URLのホワイトリストへの追加）

音声ファイル（audio要素）はChromeやSafariなどwebkit系のブラウザでは許可設定（URLをホワイトリストに追加）をしないと消音状態でも自動再生できませんが、動画ファイル（video要素）は音量0か消音設定であれば自動再生することができます。

動画ファイルの自動再生はHTMLのみで設定する方法とJavaScriptから設定する2種類の方法があります。

HTMLのみで自動再生を設定する

以下の例ではまずHTMLのみで動画ファイルの自動再生を設定します。
video要素にautoplay属性とmuted属性を指定します。

HTML コード例

<article>
  <h1>JavaScriptレシピ</h1>
  <video type="video/webm" src="./movie/swiss.mov" autoplay muted controls></video>
</article>

JavaScriptで自動再生を設定する

続いて、JavaScriptから自動再生を設定する方法を解説します。
以下の例は、先ほどのHTMLコードでvideo要素に指定したautoplay属性とmuted属性を取り除いて、JavaScriptからautoplayプロパティとmutedプロパティをtrueにして自動再生します。

HTML コード例

<article>
  <h1>JavaScriptレシピ</h1>
  <video type="video/webm" src="./movie/swiss.mov" controls></video>
</article>

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

  const videoElement = document.querySelector("video");

  videoElement.muted = true;
  videoElement.autoplay = true;
});

ページの読み込みが完了したタイミングでquerySelectorメソッドを呼び出し、video要素を取得して変数videoElementに入れます。

その後、取得したvideo要素のmutedプロパティとautoplayプロパティをtrueにして、消音と自動再生を実行します。

なお、mutedプロパティの代わりに、volumeプロパティを「0」にしても音が出ない条件を満たすため自動再生可能です。
以下のコードでも自動再生できます。

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

  const videoElement = document.querySelector("video");

  videoElement.volume = 0;
  videoElement.autoplay = true;
});

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。