在此 Codelab 中，您将学习如何根据网络质量调整内容。只有在用户使用速度较快的网络时，系统才会加载此页面的背景视频。网速较慢时，系统会改为加载图片。
通过 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'，请使用此 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> 标记最初不会下载或显示任何内容。要加载的视频网址是使用 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');
}
试试看
如需自行测试，请执行以下操作：
- 如需预览网站，请按查看应用，然后按全屏
。 - 按 `Control+Shift+J`（在 Mac 上，则按 `Command+Option+J`）打开开发者工具。
- 点击网络标签页。
- 点击 Throttling 下拉菜单，默认情况下设置为 No throttling。选择快速 3G。
现在，在仍启用“快速 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 上的应用的最终状态。
如需再次测试，请执行以下操作：
- 如需预览网站，请按查看应用，然后按全屏
。
- 按 `Control+Shift+J`（在 Mac 上，则按 `Command+Option+J`）打开开发者工具。
- 点击网络标签页。
- 点击 Throttling 下拉菜单，默认情况下设置为 No throttling。选择快速 3G。
- 重新加载应用。
应用会将网络信息更新为 3g：
