В этой лаборатории вы узнаете, как адаптировать контент в зависимости от качества сети. Фоновое видео этой страницы будет загружаться только тогда, когда пользователи подключены к быстрой сети. В более медленных сетях вместо этого загружается изображение.
API сетевой информации позволяет получить доступ к информации о качестве соединения пользователя. Вы будете использовать его свойство effectiveType
, чтобы решить, когда показывать видео, а когда изображение. effectiveType
может быть 'slow-2g'
, '2g'
, '3g'
или '4g'
.
Шаг 1. Проверьте тип подключения
Файл index.html
содержит тег <video>
для отображения фонового видео (строка 22). Код в script.js
загружает видео, устанавливая атрибут src
тега видео. (Код загрузки видео более подробно описан в шаге 2. )
Чтобы загрузить видео по условию, сначала проверьте, доступен ли 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
, чтобы видео по-прежнему загружалось в браузерах, которые не поддерживают 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'
, используйте код загрузки видео из начала лаборатории кода.
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
не установлен. URL-адрес видео для загрузки указывается с помощью атрибута 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
добавьте код для установки атрибута src
изображения в зависимости от effectiveType
сети.
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» (или «Command+Option+J» на Mac), чтобы открыть DevTools.
- Откройте вкладку «Сеть» .
- Щелкните раскрывающийся список «Регулирование », в котором по умолчанию установлено значение «Без регулирования» . Выберите Быстрый 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 .
Чтобы проверить это еще раз:
- Чтобы просмотреть сайт, нажмите «Просмотреть приложение» . Затем нажмите Полноэкранный режим .
- Нажмите «Control+Shift+J» (или «Command+Option+J» на Mac), чтобы открыть DevTools.
- Откройте вкладку «Сеть» .
- Щелкните раскрывающийся список «Регулирование », в котором по умолчанию установлено значение «Без регулирования» . Выберите Быстрый 3G .
- Перезагрузите приложение.
Приложение обновит информацию о сети до 3g :