在此 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
}
视频加载代码的运作方式如下:<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');
}
试试看
如需自行进行测试,请执行以下操作:
- 如需预览网站,请按查看应用,然后按全屏 。
- 按 `Control+Shift+J`(在 Mac 上为 `Command+Option+J`)打开 DevTools。
- 点击网络标签页。
- 点击节流下拉菜单,该菜单默认设置为不节流。选择快速 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 上的应用的最终状态。
如需再次测试,请执行以下操作:
- 如需预览网站,请按 View App(查看应用)。然后按 Fullscreen(全屏)。
- 按 `Control+Shift+J`(在 Mac 上为 `Command+Option+J`)打开 DevTools。
- 点击网络标签页。
- 点击节流下拉菜单,该菜单默认设置为不节流。选择快速 3G。
- 重新加载应用。
应用将网络信息更新为 3g: