在此 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: