根据网络质量调整视频，以适应图片投放

Milica Mihajlija

如需学习本 Codelab，请在第二个标签页中打开此 Glitch。

注意： 此 Codelab 使用 Chrome 开发者工具。下载 Chrome（如果您尚未安装）。

在此 Codelab 中，您将学习如何根据网络质量调整内容。只有当用户使用快速网络时，此页面的背景视频才会加载。在网速较慢时，系统会改为加载图片。

借助 Network Information API，您可以访问有关用户连接质量的信息。您将使用其 effectiveType 属性来决定何时投放视频以及何时投放图片。effectiveType 可以是 'slow-2g'、'2g'、'3g' 或 '4g'。

Browser Support

• 61
• 79
• x
• x

Source

第 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'，请使用此 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
}

视频加载代码的工作原理如下：<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. 如需预览网站，请按查看应用。然后按全屏 。
2. 按 `Control+Shift+J`（在 Mac 上，按 `Command+Option+J`）打开开发者工具。
3. 点击网络标签页。
4. 点击限制下拉菜单，该菜单默认设置为不限制。选择 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. 点击限制下拉菜单，该菜单默认设置为不限制。选择 Fast 3G。
5. 重新加载应用。

应用会将网络信息更新为 3g：