根據聯播網品質調整影片，配合圖片放送情況

Milica Mihajlija

在本程式碼研究室中，您將瞭解如何根據網路品質調整內容。只有當使用者網路連線快速時，系統才會載入這個網頁的背景影片。如果網路速度較慢，系統會改為載入圖片。

Network Information API 可讓您存取使用者連線品質的相關資訊。您將使用其 effectiveType 屬性來決定影片的提供時機和何時放送圖片。effectiveType 可以是 'slow-2g'、'2g'、'3g' 或 '4g'。

步驟 1：檢查連線類型

index.html 檔案包含可顯示背景影片的 <video> 標記 (第 22 行)。script.js 中的程式碼會設定影片標記的 src 屬性來載入影片。(如要進一步瞭解影片載入程式碼，請參閱步驟 2)。

如要有條件載入影片，請先檢查是否可使用 Network Information API；如果可用，請檢查連線類型。

1. 在 script.js 中，新增 if 陳述式，測試 navigator.connection 物件是否存在，以及是否有 effectiveType 屬性。
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'，請使用程式碼研究室一開始的影片載入程式碼。

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
}

影片載入程式碼的運作方式如下：<video> 標記由於未設定 src 屬性，因此一開始不會下載或顯示任何內容。系統會使用 data-src 屬性指定要載入的影片網址。

<video id="coverVideo" 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');

最後將其設為影片元素的 src 屬性：

video.setAttribute('src', videoSource);

最後一行會完成 CSS 定位：

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

步驟 3：載入圖片

如要在速度較慢的網路中有條件載入圖片，請使用與影片相同的策略。

新增圖片元素至 index.html (影片元素緊接在影片元素後方)，並使用 data-src 屬性，而非 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. 按下 `Control+Shift+J 鍵 (在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
3. 按一下 [網路] 分頁標籤。
4. 按一下「Throttling」下拉式選單，下拉式選單預設為「無節流」。選取「Fast 3G」。

現在，重新載入網頁並在仍啟用 Fast 3G 的情況下。應用程式會在背景載入圖片，而非影片：

額外功勞：回應變動

還記得這個 API 如何運用 onchange 事件監聽器嗎？它可用於許多功能：動態調整內容 (例如影片品質)、在偵測到高頻寬網路類型發生變更時重新啟動延遲資料傳輸，或在網路品質變更時通知使用者。

以下舉例說明這個事件監聽器的使用方法。新增至 script.js。每當網路資訊有所變更，這個程式碼就會呼叫 displayNetworkInfo 函式。

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

「index.html」頁面上已有一個空白的 <h2> 元素。現在請定義 displayNetworkInfo 函式，使其在 <h2> 元素中顯示網路資訊，並叫用函式。

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

displayNetworkInfo();

以下是 Glitch 上的應用程式最終狀態。

如何再次測試：

1. 如要預覽網站，請按下「查看應用程式」，然後按下「全螢幕」圖示 。
2. 按下 `Control+Shift+J 鍵 (在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
3. 按一下 [網路] 分頁標籤。
4. 按一下「Throttling」下拉式選單，下拉式選單預設為「無節流」。選取「Fast 3G」。
5. 重新載入應用程式。

應用程式會將網路資訊更新為 3g：