В этой лаборатории вы узнаете, как адаптировать контент в зависимости от качества сети. Фоновое видео этой страницы будет загружаться только тогда, когда пользователи подключены к быстрой сети. В более медленных сетях вместо этого загружается изображение.
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" 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 :
