Адаптируйте видео к показу изображений в зависимости от качества сети.

Milica Mihajlija

В этой лаборатории вы узнаете, как адаптировать контент в зависимости от качества сети. Фоновое видео этой страницы будет загружаться только тогда, когда пользователи подключены к быстрой сети. В более медленных сетях вместо этого загружается изображение.

API сетевой информации позволяет получить доступ к информации о качестве соединения пользователя. Вы будете использовать его свойство effectiveType , чтобы решить, когда показывать видео, а когда изображение. effectiveType может быть 'slow-2g' , '2g' , '3g' или '4g' .

Шаг 1. Проверьте тип подключения

Файл index.html содержит тег <video> для отображения фонового видео (строка 22). Код в script.js загружает видео, устанавливая атрибут src тега видео. (Код загрузки видео более подробно описан в шаге 2. )

Чтобы загрузить видео по условию, сначала проверьте, доступен ли 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 , чтобы видео по-прежнему загружалось в браузерах, которые не поддерживают 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');
}

Попробуйте это

Чтобы проверить это самостоятельно:

1. Чтобы просмотреть сайт, нажмите «Просмотреть приложение» . Затем нажмите Полноэкранный режим .
2. Нажмите «Control+Shift+J» (или «Command+Option+J» на Mac), чтобы открыть DevTools.
3. Откройте вкладку «Сеть» .
4. Щелкните раскрывающийся список «Регулирование», в котором по умолчанию установлено значение «Без регулирования» . Выберите Быстрый 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 .

Чтобы проверить это еще раз:

1. Чтобы просмотреть сайт, нажмите «Просмотреть приложение» . Затем нажмите Полноэкранный режим .
2. Нажмите «Control+Shift+J» (или «Command+Option+J» на Mac), чтобы открыть DevTools.
3. Откройте вкладку «Сеть» .
4. Щелкните раскрывающийся список «Регулирование», в котором по умолчанию установлено значение «Без регулирования» . Выберите Быстрый 3G .
5. Перезагрузите приложение.

Приложение обновит информацию о сети до 3g :