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

Milica Mihajlija
Milica Mihajlija

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

借助 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',请使用 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. 如需预览网站,请按 View App(查看应用)。然后按 Fullscreen(全屏)全屏
  2. 按 `Control+Shift+J`(在 Mac 上为 `Command+Option+J`)打开 DevTools。
  3. 点击网络标签页。
  4. 点击节流下拉菜单,该菜单默认设置为不节流。选择快速 3G

突出显示“快速 3G 节流”选项的开发者工具“网络”标签页

现在,重新加载页面,并保持快速 3G 处于启用状态。应用在后台加载图片,而不是视频:

带有“NETWORK INFORMATION”文本叠加层的矩阵式图片背景

额外好处:响应更改

还记得此 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 上的应用的最终状态。

带有“NETWORK INFORMATION 4g”文本叠加层的矩阵式视频背景

如需再次进行测试,请执行以下操作:

  1. 如需预览网站,请按 View App(查看应用)。然后按 Fullscreen(全屏)全屏
  2. 按 `Control+Shift+J`(在 Mac 上为 `Command+Option+J`)打开 DevTools。
  3. 点击网络标签页。
  4. 点击节流下拉菜单,该菜单默认设置为不节流。选择快速 3G
  5. 重新加载应用。

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

带有“NETWORK INFORMATION 3g”文本叠加层的矩阵式视频背景