在本程式碼研究室中,您將瞭解如何根據網路品質調整內容。只有在使用者使用高速網路時,系統才會載入此頁面的背景影片。在速度較慢的網路中,系統會改為載入圖片。
Network Information API 可讓您存取使用者連線品質相關資訊。您將使用其 effectiveType
屬性決定何時放送影片,以及何時放送圖片。effectiveType
可以是 'slow-2g'
、'2g'
、'3g'
或 '4g'
。
步驟 1:檢查連線類型
index.html
檔案包含 <video>
標記,用於顯示背景影片 (第 22 行)。script.js
中的程式碼會設定影片標記的 src
屬性以載入影片。(影片載入程式碼的詳細說明請參閱步驟 2)。
如要有條件地載入影片,請先檢查 Network Information API 是否可用;如果有,請檢查連線類型。
- 在
script.js
中,新增if
陳述式,測試navigator.connection
物件是否存在,以及是否具有effectiveType
屬性。 - 新增
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');
}
立即試用
如要自行測試,請按照下列步驟操作:
- 如要預覽網站,請按下「View App」。然後按下「Fullscreen」圖示 。
- 按下 `Control+Shift+J` 鍵 (在 Mac 上為 `Command+Option+J` 鍵) 開啟開發人員工具。
- 按一下 [網路] 分頁標籤。
- 按一下「調節」下拉式選單,預設值為「不調節」。選取「Fast 3G」。
現在,重新載入仍啟用 Fast 3G 的頁面。應用程式會在背景載入圖片,而非影片:
額外學分:回應變更
您還記得這個 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 上的應用程式的最終狀態。
如要再次測試,請按照下列步驟操作:
- 如要預覽網站,請按下「View App」,然後按下「Fullscreen」。
- 按下 Control+Shift+J 鍵 (或在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
- 按一下 [網路] 分頁標籤。
- 按一下「Throttling」下拉式選單 (預設為「無節流」)。選取「快速 3G」。
- 重新載入應用程式。
應用程式會將網路資訊更新為 3g: