【レスポンシブ対応】videoタグで読み込む動画をブレイクポイント毎に切り替える

このような悩みに答えます。

この記事では、JavaScriptを活用してビデオソースを動的に出し分ける方法とその利点について詳しく解説します。
レスポンシブデザインのサポート、ブラウザの互換性、パフォーマンスの最適化など、ウェブサイトのビデオ統合に関する一般的な悩みを解決するための具体的な手法を学ぶことができます。

この記事を読んで学んだことを実践に移せば、異なるデバイスやブラウザで効果的に動作するレスポンシブなビデオコンテンツをウェブサイトに統合する方法を身につけることができます。

この記事を書いた人

すずき

フリーランスでwebデザイナーをしています。
デザインからコーディング、運用まで幅広く対応しています。
3年間で50件以上のサイトをコーディングしてきました。

JavaScriptとビデオ読み込みの最適化

ウェブページにビデオを組み込む際の読み込み速度は、ユーザーエクスペリエンスに直接影響します。
特にビデオはファイルサイズが大きいため、効率的な読み込み方法が必要です。
JavaScriptを使ったビデオソースの動的管理は、この問題に対する効果的な解決策を提供します。

ビデオソースをJavaScriptで動的に出し分けることで、異なるデバイスやネットワーク条件に適したビデオを提供できます。
小さい画面や低帯域幅では、小さなファイルサイズのビデオを選ぶことで、読み込み時間を短縮できます。
また、ビデオが必要になるまで読み込みを遅延させる「遅延読み込み」や、ページの他の要素が読み込まれた後にビデオを読み込むように制御することも可能です。

これらの戦略により、JavaScriptはページ全体のパフォーマンスを向上させ、ユーザーに快適な体験を提供する重要なツールとなります。

実装デモ：レスポンシブなビデオの動的切り替え

この実装デモでは、レスポンシブなウェブデザインにおいて、異なるデバイスサイズに対応したビデオソースの動的切り替えを行います。
ここでの重要な点は、ビデオファイルの命名規則です。ファイル名は_pc、_spの接尾辞を除いて同じにします。
例えば、video_name_pc.mp4とvideo_name_sp.mp4の場合、基本となるファイル名video_nameは共通です。

HTMLコード

HTMLでは、<video>タグを使用してビデオを表示し、data-src属性で基本ファイル名を指定します。

<video class="video" data-src="path/to/video_name"></video>

このコードでは、ビデオプレーヤーに基本ファイルパスが設定されています。
ビデオソースはJavaScriptを通じて動的に切り替えられます。

JavaScriptコード

JavaScriptでは、画面サイズに基づいてビデオソースを切り替えます。
以下のスクリプトは、ウィンドウサイズに応じて適切なビデオソースを読み込みます。

document.addEventListener("DOMContentLoaded", function () {
  // ページ内の全てのビデオ要素を取得
  const videos = document.querySelectorAll(".video");

  function updateVideoSource(video, baseSrc) {
    // 現在のウィンドウサイズに基づいて接尾辞を選択
    const suffix = window.innerWidth <= 768 ? "_sp" : "_pc";
    const sourceMP4 = document.createElement("source");

    // 新しいソースファイルのパスを設定
    sourceMP4.setAttribute("src", baseSrc + suffix + ".mp4");
    sourceMP4.setAttribute("type", "video/mp4");

    // 既存のビデオソースをクリアし、新しいソースを追加
    video.innerHTML = "";
    video.appendChild(sourceMP4);
  }

  // 初期ロード時に全てのビデオソースを更新
  videos.forEach((video) => {
    const baseSrc = video.getAttribute("data-src");
    updateVideoSource(video, baseSrc);
  });

  // ウィンドウの横幅が変更されたときにのみビデオソースを更新
  window.addEventListener("resize", function () {
    const newSize = window.innerWidth;
    if (currentSize !== newSize) {
      currentSize = newSize;
      videos.forEach((video) => {
        const baseSrc = video.getAttribute("data-src");
        updateVideoSource(video, baseSrc);
      });
    }
  });
});

このスクリプトは、ビデオ要素のdata-src属性から基本ファイル名を取得し、デバイスサイズに応じて適切な接尾辞（_pcまたは_sp）を追加してビデオソースを更新します。

レスポンシブビデオの動的切り替えの詳細解説

HTMLコードの解説

HTMLの部分では、<video>タグを使用してビデオプレーヤーをページに組み込みます。
class="video"は、後のJavaScriptでこのビデオを簡単に特定するために使用されます。
data-src属性は、ビデオファイルのベースとなるパスを指定するために使用され、実際のファイル名はJavaScriptによって後から追加されます。

JavaScriptコードの解説

JavaScriptは、画面サイズに基づいてビデオソースを適切に切り替える役割を果たします。
DOMContentLoadedイベントは、ページが完全にロードされた後にスクリプトを実行するために使用されます。updateVideoSource関数は、与えられたビデオ要素のソースを更新します。
画面サイズが768ピクセル以下の場合はモバイル用のビデオ（_sp）、それ以上の場合はPC用のビデオ（_pc）を読み込みます。
ウィンドウのresizeイベントリスナーは、画面サイズが変更されたときにビデオソースを再度更新するために使用されます。

注意点

この実装手法により、異なるデバイスや画面サイズに応じた効果的で効率的なビデオコンテンツの提供が可能になります。
ビデオの動的なソース切り替えは、ユーザーエクスペリエンスの向上に寄与し、レスポンシブなウェブデザインの重要な要素となります。

レスポンシブでwebm対応のビデオ実装

ウェブサイトにおけるビデオコンテンツは、異なるデバイスやブラウザで最適に表示されるべきです。
これには、レスポンシブなデザインと複数のビデオフォーマット（特にmp4とwebm）のサポートが必要です。

HTMLコードの構築

HTMLの構造では、<video>タグを使用してビデオを表示し、data-src属性でビデオファイルのベースパスを指定します。

<video class="video" data-src="path/to/video_name"></video>

このコードは、ビデオプレーヤーに基本パスを設定し、具体的なビデオソースはJavaScriptで動的に追加されます。

JavaScriptコードの適用

JavaScriptを使用して、異なるフォーマットのビデオソースを動的に読み込みます。このスクリプトは、画面サイズとブラウザの対応性に基づいて最適なフォーマットを選択します。

document.addEventListener("DOMContentLoaded", function () {
  const videos = document.querySelectorAll(".video");

  function updateVideoSources(video, baseSrc) {
    const isMobile = window.innerWidth <= 768;
    const suffix = isMobile ? "_sp" : "_pc";
    const sourceMP4 = createSourceElement(baseSrc + suffix + ".mp4", "video/mp4");
    const sourceWebM = createSourceElement(baseSrc + suffix + ".webm", "video/webm");

    video.innerHTML = "";
    video.appendChild(sourceWebM);
    video.appendChild(sourceMP4);
  }

  function createSourceElement(src, type) {
    const source = document.createElement("source");
    source.setAttribute("src", src);
    source.setAttribute("type", type);
    return source;
  }

  videos.forEach((video) => {
    const baseSrc = video.getAttribute("data-src");
    updateVideoSources(video, baseSrc);
  });

  // ウィンドウの横幅が変更されたときにのみビデオソースを更新
  window.addEventListener("resize", function () {
    const newSize = window.innerWidth;
    if (currentSize !== newSize) {
      currentSize = newSize;
      videos.forEach((video) => {
        const baseSrc = video.getAttribute("data-src");
        updateVideoSource(video, baseSrc);
      });
    }
  });
});

このスクリプトでは、createSourceElement関数を使用してmp4とwebmフォーマットのソース要素を生成し、ビデオ要素に追加します。画面サイズに応じて適切なファイル（モバイル用またはPC用）を選択します。

注意点

このようにして、異なるデバイスとブラウザでビデオコンテンツを最適に表示するための実装を行うことができます。レスポンシブなデザインと複数のフォーマット対応は、ユーザーエクスペリエンスの向上に寄与します。

画像のwebp出し分け方法は以下の記事で解説しています。
画像も適切に出し分けることで、さらにサイトのパフォーマンスが向上します。

あわせて読みたい

【初心者向け】ブラウザに合わせて.webp画像を切り替える方法 .webpのメリットがわからない HTMLで.webpの切り替え方がわからない CSSで.webpの切り替え方がわからない このような悩みにお答えします。 コーディング案件で.webp対応…

まとめ

この記事では、JavaScriptを利用してウェブページのビデオソースを動的に管理する方法とその利点について詳しく解説しました。ここで学んだポイントを簡潔にまとめてみましょう。

この記事で学んだ知識を活用することで、ウェブサイトのビデオコンテンツをより効果的に管理し、ユーザーに最高のウェブ体験を提供することが可能になります。
動的なビデオ管理は、現代のウェブ開発において重要な要素であり、これをマスターすることはあらゆるウェブ開発者にとって価値のあるスキルです。