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

Milica Mihajlija
Milica Mihajlija

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

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 中,新增 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" 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');

最後,將此值設為影片元素的 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. 如要預覽網站,請按下「View App」。然後按下「Fullscreen」圖示 全螢幕
  2. 按下 `Control+Shift+J` 鍵 (在 Mac 上為 `Command+Option+J` 鍵) 開啟開發人員工具。
  3. 按一下 [網路] 分頁標籤。
  4. 按一下「調節」下拉式選單,預設值為「不調節」。選取「Fast 3G」

開發人員工具「網路」分頁,醒目顯示「快速 3G 節流」選項

現在,重新載入仍啟用 Fast 3G 的頁面。應用程式會在背景載入圖片,而非影片:

矩陣圖背景,並疊加「NETWORK INFORMATION」文字

額外學分:回應變更

您還記得這個 API 如何具有 onchange 事件監聽器嗎?這個 API 可用於許多用途:動態調整影片品質等內容;偵測到高頻寬網路類型變更時重新開始延遲資料傳輸,或在網路品質變更時通知使用者。

以下是如何使用這個事件監聽器的簡單範例。將其新增至 script.js。每當網路資訊變更時,這段程式碼就會呼叫 displayNetworkInfo 函式。

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

index.html 頁面上已有空白的 <h2> 元素。現在請定義 displayNetworkInfo 函式,讓函式在 <h2> 元素中顯示網路資訊,並叫用該函式。

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

displayNetworkInfo();

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

矩陣式影片背景,並疊加「NETWORK INFORMATION 4g」文字

如要再次測試,請按照下列步驟操作:

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

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

有「NETWORK INFORMATION 3g」文字重疊的矩陣式影片背景