ネットワーク品質に基づいて画像配信に動画を適応させる

この Codelab では、ネットワーク品質に基づいてコンテンツを適応させる方法について学習します。このページの背景動画は、ユーザーが高速なネットワークを使用している場合にのみ読み込まれます。ネットワークの速度が遅い場合は、代わりに画像が読み込まれます。

Network Information API を使用すると、ユーザーの接続品質に関する情報にアクセスできます。effectiveType プロパティを使用して、動画を配信するタイミングと画像を配信するタイミングを決定します。effectiveType'slow-2g''2g''3g''4g' のいずれかです。

対応ブラウザ

  • Chrome: 61。
  • Edge: 79.
  • Firefox: サポートされていません。
  • Safari: サポートされていません。

ソース

ステップ 1: 接続タイプを確認する

index.html ファイルには、背景動画を表示する <video> タグが含まれています(行 22)。script.js のコードは、動画タグの src 属性を設定して動画を読み込みます。(動画読み込みコードについては、ステップ 2 で詳しく説明します)。

動画を条件付きで読み込むには、まず Network Information API が使用可能かどうかを確認します。使用可能であれば、接続タイプを確認します。

  1. script.js に、navigator.connection オブジェクトが存在するかどうかと、effectiveType プロパティが存在するかどうかをテストする if ステートメントを追加します。
  2. if ステートメントを追加して、ネットワークの effectiveType を確認します。
if (navigator.connection && !!navigator.connection.effectiveType) {
  if (navigator.connection.effectiveType === '4g') {
    // Only load video on the fastest connections.
  } else {
    // In any other case load the image.
  }
}

既存の動画読み込みコードを else ステートメントでラップして、Network Information API をサポートしていないブラウザでも動画が読み込まれるようにします。

if (navigator.connection && !!navigator.connection.effectiveType) {
  if (navigator.connection.effectiveType === '4g') {
    // video loading code
  } else {
    // image loading code
  }
} else {
  const video = document.getElementById('coverVideo');
  const videoSource = video.getAttribute('data-src');
  video.setAttribute('src', videoSource);

  video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
}

ステップ 2: 動画を読み込む

effectiveType'4g' の場合は、Codelab の冒頭の動画読み込みコードを使用します。

if (navigator.connection.effectiveType === '4g') {
  const video = document.getElementById('coverVideo');
  const videoSource = video.getAttribute('data-src');
  video.setAttribute('src', videoSource);
  video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
} else {
  // image loading code
}

動画読み込みコードの仕組みは次のとおりです。src 属性が設定されていないため、<video> タグは最初は何もダウンロードまたは表示しません。読み込む動画の URL は data-src 属性を使用して指定します。

<video id="coverVideo" playsinline autoplay loop muted data-src="https://cdn.glitch.com/b6491350-b058-4eb6-aa6c-55c93122073e%2FMatrix%2C%20Console%2C%20Hacking%2C%20Code.mp4?1551464245607"></video>

データ属性を使用すると、標準の HTML 要素に追加情報を保存できます。データ要素の名前は、先頭が「data-」であれば任意に付けることができます。

動画を実際にページに表示するには、data-src から値を取得し、動画要素の src 属性として設定する必要があります。

まず、アセットを含む DOM 要素を取得します。

const video = document.getElementById('coverVideo');

次に、data-src 属性からリソースのロケーションを取得します。

const videoSource = video.getAttribute('data-src');

最後に、その値を video 要素の src 属性として設定します。

video.setAttribute('src', videoSource);

最後の行は CSS の配置を処理します。

video.setAttribute('style', 'height: 100%; width: 100%; display:inline');

ステップ 3: 画像を読み込む

低速ネットワークで画像を条件付きで読み込むには、動画の場合と同じ戦略を使用します。

index.html に画像要素を追加し(動画要素の直後)、src 属性の代わりに data-src 属性を使用します。

<img id="coverImage" data-src="https://cdn.glitch.com/36529535-5976-40f8-979b-40c898b86bd0%2F36529535-5976-40f8-979b-40c898b86bd0_1_Sn80dgiwpMjBVrqjfiDbnA.jpg?1553003835358" />

script.js に、ネットワークの effectiveType に応じて画像の src 属性を設定するコードを追加します。

if (navigator.connection.effectiveType === '4g') {
  const video = document.getElementById('coverVideo');
  const videoSource = video.getAttribute('data-src');
  video.setAttribute('src', videoSource);

  video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
} else {
  const image = document.getElementById('coverImage');
  const imageSource = image.getAttribute('data-src');
  image.setAttribute('src', imageSource);

  image.setAttribute('style', 'height: 100%; width: 100%; display:inline');
}

試してみる

ご自身でテストするには:

  1. サイトをプレビューするには、[アプリを表示] を押してから、[全画面表示] 全画面表示 を押します。
  2. Ctrl+Shift+J(Mac の場合は Command+Option+J)キーを押して DevTools を開きます。
  3. [ネットワーク] タブをクリックします。
  4. [スロットリング] プルダウンをクリックします。デフォルトでは [スロットリングなし] に設定されています。[高速 3G] を選択します。

高速 3G スロットリング オプションがハイライト表示された DevTools の [Network] タブ

高速 3G を有効にしたまま、ページを再読み込みします。アプリは動画ではなく、画像をバックグラウンドで読み込みます。

「ネットワーク情報」というテキストがオーバーレイされたマトリックスのような画像の背景

追加演習: 変更に対応する

この API に onchange イベント リスナーがあることを覚えていますか?動画品質などのコンテンツを動的に適応させる、高帯域幅のネットワーク タイプへの変更が検出されたときに保留中のデータ転送を再開する、ネットワーク品質が変化したときにユーザーに通知するなど、さまざまな用途に使用できます。

このリスナーの使用方法の簡単な例を次に示します。script.js に追加します。このコードは、ネットワーク情報が変更されるたびに displayNetworkInfo 関数を呼び出します。

navigator.connection.addEventListener('change', displayNetworkInfo);

index.html ページに空の <h2> 要素がすでに存在します。次に、<h2> 要素にネットワーク情報を表示するように displayNetworkInfo 関数を定義し、関数を呼び出します。

function displayNetworkInfo() {
  document.getElementById('connection').innerHTML = navigator.connection.effectiveType;
}

displayNetworkInfo();

Glitch のアプリの最終的な状態は次のとおりです。

「NETWORK INFORMATION 4g」というテキスト オーバーレイが付いたマトリックスのような動画の背景

もう一度テストするには:

  1. サイトをプレビューするには、[アプリを表示] を押してから、[全画面表示] 全画面表示 を押します。
  2. Ctrl+Shift+J(Mac の場合は Command+Option+J)キーを押して DevTools を開きます。
  3. [ネットワーク] タブをクリックします。
  4. [スロットリング] プルダウンをクリックします。デフォルトでは [スロットリングなし] に設定されています。[高速 3G] を選択します。
  5. アプリを再読み込みします。

アプリでネットワーク情報が 3G に更新されます。

「NETWORK INFORMATION 3g」というテキスト オーバーレイが重ねられたマトリックスのような動画の背景