Сервис для
сео - оптимизаторов

Найди ошибки на сайте
Ошибки мешают продвижению сайта
Исправь ошибки на сайте
Сайт без ошибок продвигать легче
Получи новых клиентов
Новые клиенты принесут больше прибыль

10 рекомендаций для лучшего видео на сайте

  1. Сожмите видео как можно больше
  2. Рассмотрите возможность использования наложения, чтобы скрыть артефакты
  3. Ограничьте общий размер и длину вашего видео
  4. Избегайте чрезмерного движения
  5. Убедитесь, что видео растягивается, чтобы заполнить его контейнер
  6. Аккаунт для устройств
  7. Не зацикливайся навсегда
  8. Предложить кнопку паузы
  9. Подумайте об исчезновении в игре
  10. В заключение…

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

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

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

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

Так как же избежать ошибок и делать все правильно? Легко, просто следуйте этим 10 рекомендациям.

Сожмите видео как можно больше

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

Чтобы избежать этого, нам действительно нужно сжать видео до минимального битрейта, который, по нашему мнению, выглядит приемлемым. Заманчиво использовать высококачественное видео 1080p, которое выглядит идеально четким и сексуальным, но оно просто не стоит компромисса с временем загрузки и прерванной потоковой передачей.

Вам действительно следует использовать видео 720p с низкой частотой кадров 24 или 25 кадров в секунду и протестировать несколько разных битрейтов от 750 до 1250 Кб, прежде чем выбирать самый низкий, который вы считаете приемлемым. Есть также некоторые хаки, которые могут помочь скрыть низкое качество, о которых мы скоро поговорим.

Рассмотрите возможность использования наложения, чтобы скрыть артефакты

Рассмотрите возможность использования наложения, чтобы скрыть артефакты

Если вас не устраивает качество вашего видео, или если вы довольны качеством, но оно слишком высокого качества для плавной потоковой передачи, вам следует подумать о добавлении оверлея поверх вашего видео, что может помочь скрыть качественный. Это легко сделать, добавив абсолютно позиционированный div непосредственно после вашего видео, или даже используя псевдоэлемент :: after контейнера видео.

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

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

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

Ограничьте общий размер и длину вашего видео

Низкий битрейт помогает обеспечить плавное воспроизведение нашего видео без паузы в буфере, но мы также должны помнить, что наши пользователи не заходили на наш сайт, чтобы посмотреть наше фоновое видео, и мы не должны предполагать, что они счастливы загрузить целых 2 минуты видео, которое может составлять до 20 МБ видео, которое они не просили.

Вы должны всегда ограничивать продолжительность своего видео максимум 30-40 секундами или, что еще лучше, находить короткое видео, которое легко зацикливается, чтобы оно выглядело как более длинное видео, но его размер может быть менее 1 МБ или 2 МБ, в зависимости от длины. Бесстыдная вилка: вы можете найти действительно хороший зацикливание видео на BG Stock, стоковом видео-сайте, который я начал специально для фоновых видеороликов.

Избегайте чрезмерного движения

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

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

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

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

Изображение предоставлено Pexels

Убедитесь, что видео растягивается, чтобы заполнить его контейнер

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

Есть менее известное свойство под названием Объект посадки «это делает то же самое для реальных элементов DOM, что было бы отличным способом гарантировать, что наше видео всегда покрывает свой контейнер. К несчастью, поддержка браузера поскольку «подгонка объекта» не так хороша, как должна быть, поэтому нам нужно либо использовать полифилл, либо написать некоторый JavaScript, чтобы имитировать его поведение.

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

Аккаунт для устройств

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

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

То, как вы это сделаете, зависит от вас, вы можете скрыть видео на небольших экранах в медиа-запросе CSS или использовать JavaScript, чтобы проверить пользовательский агент и полностью удалить видео на устройствах iOS / Android. jQuery Background Video делает последнее по умолчанию.

Не зацикливайся навсегда

Если вы добавите атрибут 'loop' в тег видео, ваш браузер будет продолжать зацикливать видео, пока вы не закроете вкладку. Это влияет на загрузку ЦП пользователями и может замедлить работу остальной части страницы.

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

Как и в случае с другими нашими улучшениями JavaScript, jQuery Background Video охватывает нас, что позволяет нам устанавливать время «паузы после» в секундах.

Предложить кнопку паузы

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

Мы можем легко добавить кнопку паузы / воспроизведения с небольшим количеством нестандартного JavaScript, но опять же у jQuery Background Video есть наша спина. По умолчанию будет добавлена ​​кнопка паузы / воспроизведения, и вы можете позиционировать и стилизовать ее по своему желанию.

Подумайте об исчезновении в игре

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

Мы можем сделать это, добавив изображение плаката в качестве фона элемента, содержащего <video>, установив непрозрачность видео по умолчанию на ноль, добавив CSS-переход для свойства opacity и установив непрозрачность обратно в 1, когда видео начинает играть. jQuery Background Video может позаботиться об этом за вас, если вы не хотите создавать свою собственную реализацию.

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

В заключение…

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

Похожие

Вот что такое «боке» и как iPhone 7 Plus притворяется
... видео, частично благодаря новой системе с двумя камерами. Но одно слово, которое используется для описания одной из будущих функций камеры, может вас озадачить - это слово, с которым у фотографов есть отношения любовь / ненависть, которое породило множество споров о произношении, и это слово «боке». Что такое боке Таким образом, вы можете спросить себя, что же такое боке и почему вас должно волновать, что Apple это раскручивает? Самый простой способ описать боке - это характеристики
Лучшие советы и рекомендации LG V30, которые помогут вам получить больше от вашего телефона
Джулиан Чоккатту / Digital Trends Последний флагман LG - отличный смартфон, о чем вы узнаете, прочитав наш Обзор LG V30 , Этот фаблет оснащен потрясающим OLED-экраном, длительным временем автономной работы, мощной широкоугольной камерой и некоторыми креативными режимами видео. В интерфейсе LG есть многое, поэтому мы собрали вкусный шведский стол с советами и рекомендациями LG V30, которые вы можете съесть.
Что такое закрытые ключи Биткойн?
... для ее отправки и хранения необходим важный элемент, который называется «закрытый ключ». Закрытые ключи напоминают устаревшую систему почтовых ящиков: Допустим, Мария хочет отправить почту в Питер. Во-первых, он должен знать адрес или номер почтового ящика Питера. Давайте предположим, что номер почтового ящика Питера - 2034. Таким же образом, если Мария хочет отправить Биткойн Питеру, он должен знать свой биткойн-адрес, который является его уникальным идентификационным номером.
Как перейти на Windows 10: что нужно знать
... вы пользователь Windows 7, вы находитесь в подвешенном состоянии: пока последний бесплатное серьезное обновление лазейки до Windows 10 срок действия которого истек в конце 2017 года, Microsoft прекратит поддержку ОС 14 января 2020 года. Если вы намереваетесь перейти на Windows 10 и апрельское обновление 2018 года, но фактически не завершили процесс, мы можем помочь.
Самый быстрый способ перенести фотографии и видео с вашего iPhone на ваш Mac
... чтобы выбрать группу фотографий и видео для импорта с помощью кнопки «Импорт». Зеленая галочка появится рядом с миниатюрами фотографий и видео, которые были импортированы. Снимок экрана: Мэтт Эллиотт / CNET После того, как вы импортировали некоторые или все свои фотографии, пришло время удалить их с телефона. Нажмите Command-A, чтобы выбрать все ваши фотографии, или удерживайте Command и нажмите, чтобы выбрать группу, а затем нажмите маленькую кнопку с красным зачеркнутым
Ваш телефон прослушивает, и это не паранойя
Примечание. Эта статья была обновлена ​​13 июня, чтобы пояснить, что такие приложения, как Facebook, не имеют автоматического доступа к вашим данным. Пару лет назад произошло нечто странное. Мы с другом сидели в баре, айфоны в карманах, обсуждали наши недавние поездки в Японию и то, как мы хотели бы вернуться. Уже на следующий день мы оба получили всплывающую рекламу в Facebook о дешевых обратных рейсах в Токио. Казалось, просто жуткое совпадение, но потом
Миннесота Пауэр - компания ALLETE
Скидки и Скидки Что такое светодиоды? Сменные лампочки на светоизлучающих диодах (LED) обеспечивают сравнимую экономию энергии с КЛЛ, но, по прогнозам, будут работать дольше. Эти современные лампы на 85 процентов более эффективны,
YouTube: «День из жизни» смотреть онлайн (видео)
«День в жизни» - документальный фильм режиссера Кевина Макдональда, снятый Ридли Скоттом, который был снят 24 июля 2010 года пользователями YouTube со всего мира. Тысячи интернет-пользователей представили материалы на общую сумму более 4,5 тысяч. часов, и конечным результатом является 90-минутный полнометражный фильм. Премьера картины состоялась в конце января этого года на кинофестивале Sundance. В то же время он транслировался в прямом эфире на YouTube. Демонстрации "Dzień z życia"
Американцы почти ничего не спасли на пенсию
... в качестве UX-дизайнера и разработчика, сосредоточенного на проектах, оказывающих социальное или экологическое воздействие, Дэн Валлентин мало что сохранил для выхода на пенсию. «Работа, которую я люблю, не платит, а работа, которую я оплачиваю, я не люблю», - говорит он. Живя в дорогой бухте, было сложно найти дополнительные деньги для инвестиций. Когда он работал в компании, они не предлагали пенсионные планы; когда он работает фрилансером, управляет фирмой под названием
Ваш сайт перешел на индексирование Google для мобильных устройств? Что делать дальше.
... чтобы убедиться, что все прошло гладко и что ваш сайт не испытывает никаких органических проблем Google в результате. Если Google не включил мобильную индексацию для вашего сайта или вы не уверены, в этом посте также будет рассказано, как следить за переходом и подготовкой. Как узнать, когда Google включил индексацию с мобильных устройств Войти в Google Search Console и нажмите Перейти к старой версии
Что такое гибкая реклама?
Гибкое объявление - это один из доступных форматов объявлений AdWords, которые появляются в контекстно-медийной сети Google на сайтах партнеров и в приложениях. Самое главное - это просто, легко настроить и предоставляет большой ассортимент, потому что он автоматически подгоняет свой размер, внешний вид и формат под свободную рекламную поверхность. Что нам нужно для создания эластичной рекламы? Чтобы создать адаптивную рекламу в AdWords, нам

Комментарии

Как установлена ​​игра?
Как установлена ​​игра? Самая последняя версия поставляется с установщиком Akamai, который извлечет отсутствующий файл и восстановит игру. Разве этого не произошло? Антивирусная программа говорила что-то о подозрительной загрузке (то есть неправильно понимает файл патча как вредоносный, потому что часть его кода выглядит как кусок вируса)? Или он настроен на то, чтобы вообще ничего не говорить и просто удалять то, что он считает опасным, сам по себе (настройка, которая является бессмысленной
Как Flexbox решает, какими большими должны быть вещи?
Как Flexbox решает, какими большими должны быть вещи? Это третья часть моей серии о Flexbox. В последних двух статьях мы рассмотрели что происходит, когда вы создаете гибкий контейнер и исследовал выравнивание, как это работает во Flexbox , На этот раз мы рассмотрим размеры. Как мы контролируем размер наших гибких элементов
А все потому, что производители жестких дисков считают, что в гигабайте 1000 мегабайт, а ОС Windows уверена, что 1024 Кто прав?
А все потому, что производители жестких дисков считают, что в гигабайте 1000 мегабайт, а ОС Windows уверена, что 1024 Кто прав? Сколько мегабайт в гигабайте? Сколько мегабайт в гигабайте? Основная загвоздка заключается в том, что количество информации может измеряться как в двоичной, так и в десятичной системе. Кроме того, существуют различные стандарты единиц измерения количества информации. Это и вызывает путаницу и мешает точно определить, сколько мегабайт
Но что происходит, когда вы не знаете, как кодировать?
Но что происходит, когда вы не знаете, как кодировать? Вот где Данкед предлагает заполнить пробел. Dunked предлагает адаптивные дизайны, которые готовы к Retina и позволяют создавать онлайн-портфолио без каких-либо проблем с кодированием. Вы можете выбрать из растущей коллекции профессионально разработанных шаблонов, которые идеально подходят для пикселей, настраиваются и просты в использовании. Каждый шаблон полностью адаптивен и адаптируется к любому мобильному устройству
С какими добавками вписать его в яркий и нейтральный интерьер?
С какими добавками вписать его в яркий и нейтральный интерьер? Интерьер легче всего изменить с помощью текстиля и правильно подобранных аксессуаров. Если у нас нейтральный фон, мы можем легко выполнить быструю метаморфозу. Чтобы добавить комнату цвета, достаточно достать несколько подушек, одеял, узорчатого коврика. Добавьте к этому несколько энергичных графиков и каплю цвета в виде ваз, цветных горшков, растений, и у нас уже есть интерьер с совершенно новым характером.
Как это круто?
Как это круто? Помните, что вам нужно использовать правильное расширение корпоративного домена для всего, что вы делаете. Например, если мой сервер называется MyServer, а домен моей компании - Apple.com , вам необходимо пропинговать MyServer.Apple.com . Опять же, если вы не знаете этих деталей, обратитесь в свой ИТ-отдел и запросите у них веб-адрес вашего сервера OWA (Outlook Web Access). Они также могут помочь вам определить любые другие шаги,
Хотели бы вы увеличить свое членское обязательство, чтобы покрыть этот взнос, чтобы 100% вашего обещания пошло на поддержку нашей организации?
Хотели бы вы увеличить свое членское обязательство, чтобы покрыть этот взнос, чтобы 100% вашего обещания пошло на поддержку нашей организации? ». Тогда у нас будет место для« да »или« нет ». Поскольку это добровольно и не требуется, мы можем сделать это? - Анна
Но неужели в 21 веке никто не придумал лучшего выхода из положения?
Но неужели в 21 веке никто не придумал лучшего выхода из положения? Сохраните карту на своем телефоне! Это очень просто, кроме того, Вы можете сохранить любую карту, даже карту Украины или всей территории Европы, какими бы огромными ни были территории, единственное ограничение - память устройства (телефона или планшета). Обратите внимание, что карты можно хранить только при подключении к Wi-Fi. Нажмите на меню, расположенное рядом с панелью поиска. Из списка
Не могли бы вы добавить его вместо этого?
Не могли бы вы добавить его вместо этого? Его имя пользователя: st ae mcommu nn ity.com/id/imstealinyoshizfool/ Или что-то вдоль этих линий. Обратите внимание на смелые аспекты имени пользователя: такие небольшие различия, как это, должны вас предупредить потенциальная фишинговая афера
Как вы делитесь данными или манипулируете данными, не воссоздавая их?
Как вы делитесь данными или манипулируете данными, не воссоздавая их? В этом быстро меняющемся мире, в котором мы живем, речь идет о производительности и экономии времени. В результате мы обнаружили, что MindView это не просто инструмент для составления карт разума, это настоящий инструмент для повышения производительности.
Кроме того, что каждое из них является огромным достижением, вы знаете, что они разделяют для всех намерений и целей?
Кроме того, что каждое из них является огромным достижением, вы знаете, что они разделяют для всех намерений и целей? Они все Торговые площадки. Торговая площадка - это необычный вид интернет-магазина. Это место, где вы объединяете покупателей и продавцов (пока вы не создаете свои собственные вещи). На самом деле, вы сейчас находитесь на одном месте - поскольку Envato создал этот торговый центр, и вы в настоящее время пытаетесь найти предмет, проданный альтернативному торговцу.

Так как же избежать ошибок и делать все правильно?
Что такое боке Таким образом, вы можете спросить себя, что же такое боке и почему вас должно волновать, что Apple это раскручивает?
Что такое закрытые ключи Биткойн?
Что нам нужно для создания эластичной рекламы?
Как установлена ​​игра?
Разве этого не произошло?
Антивирусная программа говорила что-то о подозрительной загрузке (то есть неправильно понимает файл патча как вредоносный, потому что часть его кода выглядит как кусок вируса)?
Как Flexbox решает, какими большими должны быть вещи?
А все потому, что производители жестких дисков считают, что в гигабайте 1000 мегабайт, а ОС Windows уверена, что 1024 Кто прав?
Сколько мегабайт в гигабайте?