videoタグで動画を遅延読み込みする方法

Webサイトで動画コンテンツを使用する際、ページの読み込み速度が遅くなってしまうことはありませんか？特に複数の動画を配置している場合、ユーザーの体験を大きく損なってしまう可能性があります。

この記事では、HTMLのvideoタグを使った動画の遅延読み込み（Lazy Loading）について、初心者の方でも理解できるよう詳しく解説していきます。実際の検証結果も交えながら、サイトの表示速度を大幅に改善する方法をご紹介します。

動画の遅延読み込みとは？

動画の遅延読み込みとは、Webページにアクセスした際に即座に動画ファイルを読み込まず、必要なタイミングで読み込みを開始する技術です。これにより、ページの初期表示速度を大幅に改善することができます。

通常、videoタグを使用して動画を埋め込むと、ページの読み込み時に動画ファイルも同時に読み込まれます。動画ファイルは画像と比べて容量が大きいため、複数の動画がある場合は特に表示速度に大きな影響を与えてしまいます。

preload属性を使った遅延読み込みの基本

preload属性の種類と特徴

HTMLのvideoタグには、動画の読み込みタイミングを制御するpreload属性があります。この属性には以下の3つの値を指定できます：

値	特徴
auto	初期値（ファイルを事前に取得）
metadata	ファイルのサイズや再生時間など、メタデータのみを取得
none	事前のファイル取得を禁止

この中でも、noneを指定することで動画ファイルの事前読み込みを完全に禁止できます。これが遅延読み込みの基本的な仕組みです。

実際の検証結果

実際に検証を行った結果、25個の動画（合計約60MB）を設置したページで以下のような結果が得られました：

preload=”auto”の場合: 約7秒の読み込み時間
preload=”none”の場合: 約0.4秒の読み込み時間

なんと、約17倍もの読み込み速度改善が確認できました！

コントロールパネル付き動画の遅延読み込み

ユーザーが操作できるコントロールパネルを表示する動画の場合、HTMLのみで簡単に遅延読み込みを実装できます。

基本的な実装方法

Copy<video playsinline controls preload="none" poster="video/video_thumbnail.jpg">
  <source src="video/sample.mp4" type="video/mp4">
  <source src="video/sample.webm" type="video/webm">
</video>

各属性の詳細説明

playsinline: モバイル端末での全画面表示を防ぐ
controls: 再生・停止などのコントロールパネルを表示
preload=”none”: 動画ファイルの事前読み込みを禁止
poster: 動画読み込み前に表示するサムネイル画像

poster属性の重要性

preload="none"を指定すると、動画の最初のフレームが表示されないため、サムネイル画像が真っ黒になってしまいます。これを防ぐため、poster属性で動画の代替画像を指定することが重要です。

動画のサムネイル画像は、動画の内容を分かりやすく伝える画像を用意しましょう。動画の最初のフレームを画像として書き出すのが一般的です。

自動再生動画の遅延読み込み

自動再生する動画の場合は、JavaScriptを使用した実装が必要になります。これは、ブラウザのセキュリティポリシーにより、ユーザーの操作なしに動画を自動再生することが制限されているためです。

HTMLの設定

Copy<video id="myVideo" playsinline muted loop preload="none" poster="video/video_thumbnail.jpg">
  <source src="video/sample.mp4" type="video/mp4">
  <source src="video/sample.webm" type="video/webm">
</video>

自動再生の場合、以下の属性が必要です：

muted: 音声をミュートにする
loop: 動画をループ再生する
autoplay: 通常は指定しますが、遅延読み込みの場合はJavaScriptで制御するため省略可能

JavaScriptによる実装

Copydocument.addEventListener("DOMContentLoaded", () => {
  const video = document.getElementById("myVideo");

  const playVideo = () => {
    // 動画データを読み込む
    video.load();
    
    // 動画を再生（エラーハンドリング付き）
    video.play().catch(error => {
      console.log('再生エラー:', error);
    });
  };

  // スクロールイベントで動画を読み込み・再生（一度だけ実行）
  window.addEventListener('scroll', playVideo, {once: true});
});

スクロールイベントの活用

上記のコードでは、ユーザーがページをスクロールしたタイミングで動画の読み込みと再生を開始します。スクロールは、ユーザーがページを閲覧する際に必ず行う操作のため、自然な形で動画を開始できます。

重要なのは、{once: true}オプションを指定することです。これにより、スクロールイベントが一度だけ実行され、動画が繰り返し再生されることを防げます。

特定のスクロール位置での遅延読み込み

さらに高度な実装として、動画が画面に表示される位置までスクロールした際に動画を読み込む方法もあります。

HTML

Copy<video id="myVideo" class="tgtVideo" playsinline preload="none" poster="video/video_thumbnail.jpg">
  <source src="video/sample.mp4" type="video/mp4">
  <source src="video/sample.webm" type="video/webm">
</video>

JavaScript

Copydocument.addEventListener("DOMContentLoaded", () => {
  const video = document.getElementById("myVideo");
  const targetElem = document.querySelector(".tgtVideo");
  let executed = false;

  window.addEventListener("scroll", () => {
    const ePos = targetElem.offsetTop;
    const scroll = window.scrollY;
    const windowHeight = window.innerHeight;

    // 動画が画面に表示される位置までスクロールした場合
    if (scroll > ePos - windowHeight && !executed) {
      // 動画の設定
      video.loop = true;
      video.muted = true;
      
      // 動画データを読み込み
      video.load();
      
      // 動画を再生
      video.play().catch(error => {
        console.log('再生エラー:', error);
      });
      
      executed = true; // 一度だけ実行させるためのフラグ
    }
  });
});

この実装により、ユーザーが動画のあるセクションまでスクロールしたタイミングで初めて動画が読み込まれ、より効率的な遅延読み込みが実現できます。

動画ファイルの最適化テクニック

遅延読み込みと併せて、動画ファイル自体の最適化も重要です。以下のポイントを意識することで、さらなる表示速度改善を図れます。

1. 適切なサイズでの書き出し

動画の表示サイズに合わせて、適切な解像度で書き出しましょう。例えば、200px×100pxで表示する動画に1920×1080のフルHD動画を使用する必要はありません。

2. 音声の削除

自動再生する動画では音声が再生されないため、音声トラックを削除することでファイルサイズを削減できます。

3. 複数形式の提供

WebMとMP4の両方の形式を提供することで、ブラウザが対応する最適な形式を自動選択します：

Copy<video playsinline controls preload="none" poster="video/video_thumbnail.jpg">
  <source src="video/sample.webm" type="video/webm">
  <source src="video/sample.mp4" type="video/mp4">
</video>

WebMはMP4よりもファイルサイズが小さい場合が多いため、対応ブラウザではWebMが優先的に使用されます。

4. レスポンシブ対応

スマートフォンとPCで異なる動画を使用する場合は、JavaScriptで動画を出し分けましょう。CSSのdisplay: noneを使用すると、非表示にした動画も読み込まれてしまうため注意が必要です。

実装時の注意点とベストプラクティス

セキュリティポリシーへの対応

現代のブラウザでは、ユーザーの操作なしに動画を自動再生することが制限されています。自動再生を行う場合は、以下の条件を満たす必要があります：

動画に音声が含まれていない（muted属性）
ユーザーの操作（スクロール、クリックなど）をトリガーとする

エラーハンドリング

動画の再生に失敗する可能性もあるため、適切なエラーハンドリングを実装しましょう：

Copyvideo.play().catch(error => {
  console.log('再生エラー:', error);
  // 必要に応じて代替処理を実装
});

Intersection Observer APIの活用

より高度な実装として、Intersection Observer APIを使用することで、パフォーマンスを向上させることができます：

Copyconst observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const video = entry.target;
      video.load();
      video.play();
      observer.unobserve(video);
    }
  });
});

observer.observe(document.getElementById('myVideo'));

SEOへの影響と対策

構造化データの活用

動画コンテンツはSEOにおいても重要な要素です。構造化データを使用することで、検索エンジンに動画の内容を正確に伝えることができます。

poster属性の最適化

Googleの動画のベストプラクティスでは、poster属性の設定が推奨されています。動画の内容を適切に表現するサムネイル画像を設定しましょう。

アクセシビリティの考慮

動画にはキャプションや代替テキストを提供し、すべてのユーザーがコンテンツにアクセスできるよう配慮しましょう。

表示速度改善の重要性

Webサイトの表示速度は、ユーザー体験だけでなく、SEOにも大きな影響を与えます。Googleは「Core Web Vitals」として、Webサイトのパフォーマンスを評価指標の一つとして明確に位置づけています。

動画の遅延読み込みは、特に以下の指標改善に効果的です：

LCP（Largest Contentful Paint）: 最大コンテンツの描画時間
FID（First Input Delay）: 初回入力遅延
CLS（Cumulative Layout Shift）: レイアウトシフトの累積

まとめ

HTMLのvideoタグを使った動画の遅延読み込みは、Webサイトの表示速度を大幅に改善する効果的な手法です。

主要なポイント：

**preload=”none”**による基本的な遅延読み込み
poster属性でのサムネイル画像設定
JavaScriptを使った自動再生動画の制御
スクロール位置での動画読み込み制御
動画ファイル自体の最適化

これらの技術を組み合わせることで、ユーザー体験を損なうことなく、大幅な表示速度改善を実現できます。

表示速度の改善は、ユーザーの離脱率低下、コンバージョン率向上、SEO評価向上など、様々なメリットをもたらします。特に、動画コンテンツが多いサイトでは、遅延読み込みの実装は必須と言えるでしょう。

動画の遅延読み込みに関するさらなる改善をお考えの方は、LandingHubでも表示速度の最適化について詳しく解説しています。プロフェッショナルなWebサイト制作において、パフォーマンス最適化は欠かせない要素です。

今回ご紹介した手法を活用して、より高速で快適なWebサイトを構築していきましょう。実装の際は、必ず検証を行い、実際の改善効果を確認することをお勧めします。