От автора: видео в сети может быть обоюдоострым мечом. Сайты с автоматическим воспроизведением видео сообщают о растущей популярности (кто не останавливался в социальных сетях, чтобы узнать, о чем идет речь в видео?), что приводит к увеличению продолжительности посещения веб-сайтов. Однако, если видео не воспроизводится быстро или гладко, посетители могут расстроиться, и вы рискуете оттолкнуть тех самых клиентов, которые должны были быть более глубоко вовлечены.
Существует множество различных вариантов использования для доставки видео в Интернете. В этом посте я хочу рассказать об использовании фоновых видео в Интернете и о том, как мы можем улучшить их доставку и воспроизведение.
Фоновое видео — отличный способ улучшить доставку контента на вашем сайте. Помимо слов и изображений, в фоновом режиме выполняется какое-то движение, которое может помочь вашим клиентам лучше понять ваши услуги и, почему они должны их использовать. Но все может пойти не так, как надо. Две самые большие проблемы, которые я видел:
Пользователи прокручивают видео до его запуска. Если они никогда не видят воспроизводимого видео — цель видео потеряна.
Фоновое видео постоянно запускается и останавливается. Каждый раз, когда видео останавливается, оно инициирует изменение контекста, отвлекая посетителя.
Итак, что вы можете сделать, чтобы видео, добавленное на ваш сайт, воспроизводилось быстро и эффективно? Вот несколько советов, которые могут помочь ускорить доставку видео.
Альтернативные форматы
Используя тег video и source, вы можете предоставить различные форматы видео. Формат webm обычно приводит к уменьшению размера файлов, поэтому браузеры, которые поддерживают этот формат, могут быстрее доставлять видео конечному пользователю:
<video autoplay muted> <source src= video.webm> <source src= video.mp4> Your Browser does not support video. </video>
Удалите звуковую дорожку
Поскольку фоновое видео и (зацикленное видео в формате GIF), как правило, не воспроизводят звук, удаление звуковой дорожки из видео может уменьшить его размер на 5-10%. Например, это результат ffprobe из фонового видео:
Это звуковая дорожка, и она воспроизводится со скоростью 192 кбит / с, ее никто не может услышать. Удаление этого резко уменьшило бы размер файла и улучшило бы воспроизведение. (Если вы хотите использовать ffprobe для видео, оно является частью FFMPEG, я создал API — вы найдете его на https://streamclarity.com/probe?url=<entervideourl>)
Совет: тихая звуковая дорожка все еще занимает «место» в видеофайле. Хотя верно, что пустые данные сжимаются очень хорошо, полное удаление звуковой дорожки из видеофайла экономит еще больше места. С помощью FFMPEG и других инструментов для редактирования видео это можно сделать легко.
Тег poster: удалите постер
В теге video вы можете указать изображение постера, которое появляется перед воспроизведением видео. Этот файл будет загружен до (или одновременно) с видео, что задержит воспроизведение ролика. Он также может добавить вспышку постера перед началом видео, что может сбивать с толку.
<video controls poster=image.jpg src=video.mp4> </video>
В приведенном ниже примере на изображении постера перед началом видео появляется вспышка изображения кролика.
Мобильные загрузки
Если фоновое видео не появляется на мобильном сайте, важно помнить, что свойство CSS display:none не означает также download:none. Ваши серверы по-прежнему доставляют несколько МБ видео-контента каждому из мобильных пользователей. Решение. Используйте JavaScript, чтобы отображать атрибут видео только для экрана определенного размера. Когда я загружаю эту страницу на меньшем экране, видео не воспроизводится, но у меня загружено 4,0 МБ видео. Когда ширина экрана >768 пикселей, видео начинает воспроизводиться в фоновом режиме. Другими словами, мобильные пользователи НИКОГДА НЕ УВИДЯТ 41% контента, загружаемого на этой странице.
Пока вы работаете над этим, вы можете создать уменьшенную версию видео для мобильных устройств и использовать тот же JavaScript для доставки меньшего видео на мобильные устройства, что улучшит опыт ваших мобильных пользователей. Стоит проверить, что видео все еще выглядит хорошо в портретном режиме — вы можете рассмотреть другой вариант видео для мобильных устройств.
Оценивайте длину
Продолжительность видео фактически не влияет на начало воспроизведения или количество циклов. Но важно помнить, что для фоновых видео лучше всего подходят короткие видеоролики и, вероятно, для этого не подходят 3-4-минутные видео о ваших товарах. (Но разместите это видео на своей странице для тех, кто заинтересован!)
Понизьте битрейт
Битрейт видео измеряется в мегабайтах в секунду — это количество видео, которое используется в течение каждой секунды воспроизведения. Чтобы уменьшить битрейт — вы можете либо уменьшить размеры видео, либо увеличить компрессию (что влияет на качество). Другим важным моментом, который следует учитывать, является то, что американские операторы сотовой связи увеличивают скорость воспроизведения видео в своих сетях до 1,5 МБ / с (например, BingeOn от T-Mobile и StreamSaver от AT&T). Наличие видео, которое может воспроизводиться со скоростью менее 1,3 МБ / с (оставляя место для других файлов), крайне важно для успешной потоковой передачи на мобильных устройствах в США.
Протестируйте воспроизведение видео
Наконец, вы всегда должны проверять воспроизведение видео. Я создал StreamOrNot — бесплатный инструмент, который измеряет время запуска и характеристики задержки любого видео в Интернете. Вы можете использовать свой любимый механизм регулирования сети, чтобы увидеть, как быстро ваше видео будет запускаться в разных условиях. Если вы обнаружите, что для начала воспроизведения видео требуется слишком много времени, вы можете перекодировать его с более низким разрешением или немного увеличить сжатие — уменьшив размер файла и обеспечив более быструю передачу видео в браузер.
Видео в Интернете — это не так сложно, но есть несколько простых шагов, которые вы можете предпринять, чтобы ваши ролики могли быстро воспроизвести пользователи. Обеспечивая достаточно высокую скорость передачи видео (удаляя звуковую дорожку, уменьшая размеры и сжимая видео), вы можете гарантировать, что фоновое видео будет воспроизводиться быстро и без остановок. Тестирование с помощью таких инструментов, как StreamOrNot, может помочь вам определить, будет ли видео запускаться достаточно быстро для ваших конечных пользователей.
Автор: Doug Sillars
Источник: https://calendar.perfplanet.com
Редакция: Команда webformyself.