JavaScript

レシピ

動画

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

ページの読み込みと同時に、動画ファイルを自動再生する方法について解説します。

この記事のポイント

  • 動画ファイルの自動再生はvideo要素autoplay属性をつける
  • JavaScriptでautoplayプロパティtrueに設定しても自動再生できる
  • 自動再生するためには音量を0にするか消音(ミュート)設定にする必要がある

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

ページの読み込み完了したタイミングなどに動画ファイルを自動再生するときは、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;
});

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

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

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