Фон для сайта html: Как сделать фон в html: порядок действий

Лучшие практики для оптимизации фонового видео HTML

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

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

Короткое фоновое видео

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

Помните, что это фоновое видео, а не продукт или обучающее видео. Видео не должно быть длиннее 15 или 20 секунд. Клип меньшей продолжительности сохраняет разумный размер и может начать потоковую передачу быстрее. Если вам нужно показать 60-секундный контент, возможно, вам нужно настоящее рекламное или маркетинговое видео!

Уменьшить движение и скорость

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

Оптимизация видеофайла

Здесь нужно сделать три основных действия:

1) Сохранить размеры Standard HD

Ваше видео может быть HD (высокой четкости), то есть видео 720p (1280 x 720 пикселей). На самом деле нет причин экспортировать фоновое видео в формате Full HD (1920 x 1080) — это просто излишество и потеря пропускной способности.

2) Низкая частота кадров

Частота кадров 24 или 25 кадров в секунду достаточна. В конце концов, мы не продюсируем голливудский фильм! Меньшее количество кадров означает меньший размер файла.

3) Удалить аудиоканал

Фоновые видео все равно не будут автоматически воспроизводиться со звуком, поэтому аудиоканал не нужен. При экспорте видео не забудьте пропустить аудиоканал.

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

Оптимизация изображения афиши

Изображение афиши — это изображение, которое отображается во время загрузки видео. Обычно он совпадает с первым кадром видео, поэтому загрузка видео выглядит бесшовной. Не забывайте, что это изображение должно быть оптимизировано, как и любое другое изображение.

Поддержка нескольких форматов видео

Если вы хотите работать с различными браузерами, экспортируйте видео в формате mp4 и webm. Размеры сжатых файлов этих видео, вероятно, будут очень похожими. Вот простой пример того, как код может выглядеть на веб-странице:

 <видеопостер="/bg-video-posterimage.jpg">
  
  
 

Мы предоставляем несколько форматов, поскольку не все браузеры поддерживают одни и те же форматы видео. Используя «исходные» элементы, браузер будет использовать первый из них, который он понимает (например, Safari будет использовать mp4, а Chrome — webm).

Теперь, когда видео готово для отображения на вашей странице, обратите внимание на следующие моменты:

Обеспечьте контрастность

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

Добавить кнопку паузы

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

Пример оптимизации фонового видео: Tesla

На момент написания этой статьи у Tesla есть фоновое видео на странице модели Y: https://www.tesla.com/modely

Это видео выглядит великолепно и демонстрирует их продукт в действие, похожее на рекламу. Несколько фактов об этом видео:

• Оно длится всего 14 секунд
• Звук отсутствует (хотя в этом видео есть стереофонические аудиоканалы без звука. Возможно, их удаление может еще больше уменьшить размер файла)
• Циклы видео
• Есть элементы управления видео, если вы наводите курсор на видео, что позволяет пользователю приостановить его
• Достаточный контраст, чтобы прочитать текст над видео
• Он в формате mp4 (они даже не обслуживаются webm в качестве альтернативного источника на рабочем столе)
• Размеры 1254 × 1080 (нечетные размеры, но ближе к квадрату, чтобы соответствовать дизайну их страницы)
• Размер всего 2,9 МБ
• Частота кадров 25 FPS
• Битрейт составляет 1,68 Мбит/с
• Они предоставляют альтернативную веб-версию для мобильных устройств

В целом, это хороший пример оптимизации фонового видео.

Окончательная оптимизация: мобильная версия

В зависимости от проекта может возникнуть необходимость показывать меньшее видео на мобильных устройствах или вообще не показывать видео (вместо этого использовать изображение) для экономии трафика ваших пользователей.

Мы уделяем большое внимание Google Page Speed ​​Insights и Core Web Vitals, о которых я говорил в своем посте «Улучшение работы с Google Page с помощью Core Web Vitals». Это очень важно, если вы хотите, чтобы ваш сайт отображал страницы быстро.

Изучая Web Vitals в проектах с фоновыми видео, которые должны отображать изображение на мобильных устройствах, мы заметили, что даже несмотря на то, что видео не показывалось на мобильных устройствах (потому что мы скрывали его с помощью медиа-запросов CSS), оно все равно продолжало отображаться. загружаться в фоновом режиме, как и постер к видео. Мы не хотели, чтобы какая-либо часть видеоэлемента загружалась (мы хотели показать совершенно отдельное мобильное изображение, над которым у нас было больше контроля с помощью CSS, чем это позволяло изображение постера), поэтому нам пришлось сделать еще один шаг. Это было легче сказать, чем сделать — при поиске в Интернете было не так много информации о ленивой загрузке изображения видеопостера.

Для этого нам понадобилась помощь JavaScript. Мы уже использовали Lazy Sizes для отложенной загрузки изображений (это означает, что изображения не загружаются на страницу до тех пор, пока пользователь не прокрутит изображение, что позволяет страницам загружаться быстрее). Мы поняли, что существует плагин/расширение Lazy Sizes под названием Openhooks, которое расширяет lazySizes для дополнительной ленивой загрузки вещей, отличных от изображений, включая скрипты/виджеты, фоновые изображения, стили и видео/аудио элементы.

Вот пример того, как мы реализовали это для элемента видео. Пример кода находится в Twig, а рассматриваемый сайт был построен на Craft CMS, хотя этот метод также будет работать с другими языками шаблонов и другими системами:

 {# Обратите внимание на атрибуты 'data-' и пустое автовоспроизведение для плагина lazysizes servehooks, поэтому ничего из этого не загружается на мобильных устройствах. #}
 

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

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

Надеюсь, вы сможете использовать эту статью в качестве справочного материала, если кому-то нужно создать видео и он задает такие вопросы, как «Как долго должна выполняться анимация, прежде чем она зациклится? Существуют ли технические параметры, которые должен знать аниматор, чтобы сделать файл « light’, чтобы сократить время загрузки? Какой формат файла предпочтительнее?» — именно те вопросы, которые вызвали этот пост.

Удачи с фоновыми видео!

Проигрыватель фоновой музыки для веб-сайта в формате HTML (бесплатно и без кодирования)

Вставьте привлекательный вариант на свою веб-страницу и быстро получите еще больше довольных клиентов

Описание

Фоновый аудиоплеер Elfsight — это простой виджет, позволяющий воспроизводить музыкальные треки на страницах вашего HTML-сайта. Плагин имеет широкие возможности настройки: вы можете изменить его положение, поместив в любое место на странице, изменить его размер, изменить фон и другие части, чтобы смешать его со стилем вашего веб-сайта, применить темную цветовую схему, открыть обложки и отобразить или скрыть четыре другие части игрока, например индикатор выполнения, заголовок и многое другое. Вы можете загрузить столько треков, сколько вам нужно, чтобы порадовать своих пользователей, включить фоновую музыку в опции автовоспроизведения и быть уверенным — ваша аудитория не покинет вашу домашнюю страницу сразу!

С фоновым музыкальным проигрывателем Elfsight наблюдайте за активным ростом бизнеса и увеличением продаж

Основные функции виджета включают

• Многочисленные цветовые вариации
• Темная/светлая цветовая тема
• Гибкая конструкция
• Два готовых к использованию макета
• Возможность добавления фонового изображения

Просто посмотрите эту демонстрацию, чтобы получить полное представление

Как добавить фоновое аудио на веб-сайт HTML?

Просто выполните приведенные ниже рекомендации, чтобы начать работу с виджетом.

1. Откройте нашу бесплатную демо-версию и начните создавать собственный виджет.
   Выберите выбранный дизайн и функциональные особенности плагина и примените исправления.
2. Получите свой уникальный код, указанный в специальной форме в Elfsight Apps
   
   Когда генерация вашего личного виджета будет завершена, скопируйте эксклюзивный код из появившегося окна и сохраните его для дальнейшего использования.
3. Начало применения фонового звука на вашем HTML-сайте
   Добавьте скопированный ранее код на свой сайт и сохраните исправления.
4. Установка полностью завершена
   Посетите свой сайт, чтобы проверить работу инструмента.

Если у вас возникнут вопросы или возникнут проблемы, без колебаний обращайтесь в нашу службу поддержки клиентов. Наши консультанты стремятся решить все проблемы, которые могут возникнуть у вас с плагином.

Как я могу встроить фоновую музыку на свой HTML-сайт?

Построение инструмента выполняется на сайте Elfsight, кодировать не нужно. Перейдите к нашей демо-версии, чтобы настроить собственное приложение, получить код и встроить его на свой веб-сайт.

Лучшие примеры использования интеграции музыкального проигрывателя

Мы предоставим вам множество возможностей персонализации: полноразмерные виджеты для добавления в зону контента, плавающие виджеты для вариантов прокрутки, миниатюры для нижнего колонтитула, заголовка и всего виды вертикальных опций для боковых панелей и меню веб-сайта.

Есть ли возможность создать Рождественский или Громкий плеер с помощью вашего редактора?

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

Цены

14-дневная гарантия возврата денег.