удобное руководство для веб-разработчиков

В последнее время видео-фоны стали настолько распространены в межсетевых страницах, что они есть на каждой третьей или четвертой странице, которую вы посещаете. Почему нет? Это придает веб-сайту свежий, динамичный вид и передает сообщение в очень сложной манере. Таким образом, дизайнерам не нужно еще раз обдумывать это, прежде чем предлагать видео-фон для своего следующего дизайна веб-страницы. Но для разработчика дела обстоят не так уж и уютно. Ему нужно сейчас разобраться во всех мельчайших деталях, связанных с размещением видео на его странице. Хм ... спросите вы, что такого сложного?

  • Проблемы с макетом при использовании видео в качестве фона
  • Изображения-заполнители, чтобы удерживать внимание пользователя до загрузки видео
  • Художественное направление изображений-заполнителей
  • Воспроизведение фонового видео без буферизации
  • Форматы мультимедиа
  • Поддержка мобильных устройств
  • Поддержка старых браузеров
  • Представление
  • Поддержка систем управления контентом

Итак, список. Есть множество способов удовлетворить все вышеперечисленные требования. В этом посте я пытаюсь объяснить, что сработало для меня в одном из моих недавних проектов, и получить отзывы сообщества.

TL; DR;

Не хотите читать всю историю? Перейдите к живой демонстрации или возьмите сценарий fs-video-bg в репозитории github. Просто добавьте разметку, включите файл сценария, и вы сразу же приступите к работе.

Настройка

Начнем с простого тега видео.

Я намеренно исключил атрибуты autoplay и controls в теге видео, поскольку ни один из них нам не нужен. Поскольку пользователь является фоновым элементом, он не должен взаимодействовать с видео. Так что нет необходимости в элементах управления видео. Кроме того, для фоновых видео не нужен звук, поэтому добавление атрибута «без звука» гарантирует, что звук не будет воспроизводиться, даже если в исходном видео есть звук. Добавьте атрибут ‘loop’, если видео нужно воспроизводить в цикле.

Почему бы не автовоспроизвести? Мы не хотим, чтобы видео останавливалось и прерывалось в фоновом режиме из-за буферизации. Но мы также не хотим ждать, пока видео загрузится полностью. Тогда есть большая вероятность, что пользователь уйдет и видео не заметят. Итак, нам нужно начать воспроизведение видео, как только оно у нас будет достаточно в буфере.

Как мы можем это сделать? JavaScript приходит на помощь! Для видеоэлементов существует событие canplaythrough, которое запускается, как только браузер оценивает, что он может воспроизводить видео, не останавливаясь для буферизации. Slick!

Но если вы хотите, чтобы воспроизведение начиналось только после того, как видео было полностью загружено, просто используйте событие «canplay» вместо «canplaythrough», чтобы запустить воспроизведение видео.

Форматы мультимедиа

Не существует единого формата, который имел бы встроенную поддержку воспроизведения во всех браузерах. Большинство современных браузеров поддерживают Mp4. Но поскольку Mp4 использует проприетарную лицензию, некоторые браузеры не воспроизводят Mp4 из коробки. Поэтому, если вам нужна встроенная поддержка воспроизведения видео в максимальном количестве браузеров, лучше всего включить видео в форматах MP4 и WebM.

Настройка макета

Мы поставили видео на место. Теперь, чтобы сделать его похожим на полноэкранный фон, нам понадобится немного волшебства CSS. Если вы ориентируетесь только на современные браузеры, это просто и понятно. Просто установите ширину и высоту на 100%, а для свойства подгонки объекта установите значение крышка, чтобы соотношение сторон сохранялось.

Большинство браузеров, за исключением IE и Edge, поддерживают свойство соответствия объектам. Для тех, кто не поддерживает это свойство, потребуется полифилл.

Изображения плакатов

Видео огромные. И браузерам требуется время для их загрузки, особенно при нестабильных соединениях. До тех пор мы не можем просто оставить фон страницы пустым. Для этого мы можем использовать атрибут poster тега video. «Плакат» будет отображаться на заднем плане до загрузки видео. Это изображение должно идеально соответствовать первому кадру вашего видео.

Адаптивные изображения для плакатов?

Таким образом, изображение плаката решает нашу проблему «нечего» показывать, пока видео не загрузится. Но есть одна загвоздка. Атрибут Poster принимает только одно изображение. И это изображение может не соответствовать всем различным соотношениям сторон экрана. Было бы здорово, если бы тег видео поддерживал что-то вроде того, что тег изображения делает для изображений. Набор изображений плакатов, из которых браузер может выбирать в зависимости от размеров экрана и плотности пикселей.

Быстрый поиск привел меня к небольшой библиотеке под названием Posterfill, которая дает почти то же самое. Это позволило нам определить пару изображений плакатов и правило медиа-запроса, чтобы определить, когда должен применяться конкретный плакат. Этого было недостаточно, поскольку нам также приходилось поддерживать устройства сетчатки. Вдохновленный Посттерфиллом, я написал небольшую вспомогательную библиотеку. Разметка была изменена, как показано ниже, для обеспечения адаптивной поддержки плакатов.

Это дало мне наиболее точное изображение плаката для текущего разрешения экрана и соотношения сторон. Но поскольку это чисто JavaScript-решение, сейчас у нас есть другая проблема. Пока не будет запущено событие загрузки браузера, постеров не будет. А в браузерах, в которых отключен JavaScript, мы не получим никаких плакатов. Вернуться на круги своя, да? Выход состоит в том, чтобы вернуть атрибут плаката с изображением плаката по умолчанию. Но это приведет к двойной загрузке изображений плакатов. Плакат по умолчанию и плакат, соответствующий размерам экрана, что увеличит вес страницы.

Чтобы уменьшить влияние, мы можем использовать уменьшенную версию фактического изображения в качестве плаката по умолчанию, который будет заменен соответствующим в браузерах с поддержкой JavaScript. На демонстрационной странице я использовал уменьшенное изображение и размыл его, чтобы пикселирование было менее заметным.

Поддержка мобильных устройств

Несмотря на то, что мобильные устройства поддерживают воспроизведение видео в формате HTML5, не рекомендуется использовать полноразмерный фон для видео на мобильных устройствах. Пользователи не захотят тратить свои драгоценные сотовые данные на фоновые видеоролики хиппи. Сами производители браузеров предвидели это и запретили автовоспроизведение видео в мобильных браузерах. Видео не будут воспроизводиться, если пользователи не будут взаимодействовать с видео, нажав кнопку воспроизведения. Мы не можем обойти это, инициируя события щелчка из JavaScript, даже если бы захотели.

Наш отзывчивый плакат станет прекрасным запасным вариантом для видео на мобильных устройствах. Но поскольку мы упоминали видеофайлы в html, они будут загружены, хотя автовоспроизведение отключено. Чтобы предотвратить это, нам придется удалить определения видеоисточников из разметки. Этого можно добиться, изменив атрибут источника с src на data-src. Теперь, поскольку атрибут источника не подтверждает правильность определения источника, видео не будет автоматически буферизовано. С помощью Javascript мы определим, поддерживается ли автовоспроизведение, и для положительных совпадений мы скопируем значение из атрибута data-src в атрибут src. Для определения функции автовоспроизведения видео я использовал Modernizr.

CMS

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

Производительность

И последнее, но самое важное, на что следует обратить внимание, - это влияние на производительность видео в качестве фона страницы. Каждый байт, который мы добавляем на нашу страницу, влияет на время загрузки. Это становится контрпродуктивным, если вы добавляете тяжелые видео на свою страницу, и пользователи просто откажутся от него из-за того же. Старайтесь, чтобы продолжительность видео была меньше минуты и загружайте их только после события загрузки страницы, чтобы это не повлияло на критический путь рендеринга. Также убедитесь, что видео хорошего качества и разрешения достаточно, чтобы охватить даже самый широкий экран. Сжимайте видео до оптимального уровня, чтобы размер файла проверялся без ущерба для качества. Другой способ компенсировать потерю качества - использовать полупрозрачные цветные наложения поверх видео, которые сделают визуальные артефакты в видео низкого качества менее заметными.

Бонус: сжатие видео

Если вас не пугает интерфейс командной строки, ffmpeg - лучший инструмент для этой работы. Он позволяет сжимать, конвертировать и даже удалять аудио из исходного видео с помощью одной команды.

ffmpeg -i source.mov -b:v 1280k  -an -y output.webm

Попробуйте поиграть с параметром -b: v, который управляет битрейтом видео. Выберите значение, обеспечивающее наименьший размер файла и приемлемое качество вывода. Вы также можете извлечь первый кадр из исходного видео для использования в качестве изображения плаката, выполнив следующую команду

ffmpeg -i source.mp4 -ss 00:00:00 -vframes 1 poster.jpg

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

Для тех, кому не нравится командная строка, следующий лучший вариант - Ручной тормоз. Он бесплатный, с открытым исходным кодом и поддерживается на всех основных платформах.

Вот и все ..

Надеюсь, это руководство дало вам информацию о различных аспектах создания фонового видео и о том, как их реализовать. Если у вас есть мысли о том, как сделать его еще лучше, воспользуйтесь полем для комментариев ниже. Спасибо!