Выйдя за рамки изображений с помощью простого видео для Интернета

Изучите базовое видео. Повышайте вовлеченность.

Doug Sillars

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

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

Итак, давайте начнем!

Тег <видео>

Это кажется очевидным, не так ли? Чтобы добавить видео, вам нужно добавить тег <video> , указать источник, и вперед к гонкам!

<video src="myVideo.mp4">

И ты прав. На самом высоком уровне это все, что вам нужно, чтобы добавить видео в Интернет. Но к тегу видео можно добавить множество атрибутов, чтобы улучшить макет и доставку видео.

Тег <источник>

Возможно, лучший способ улучшить доставку видео в Интернете — оптимизировать файлы, доставляемые в браузер. Это можно сделать с помощью тега <source> :

<video>
  <source src="myWebmVideo.webm" type="video/webm">
  <source src="myh265Video.mp4" type="video/mp4">
  <source src="myh264Video.mp4" type="video/mp4">
</video>

Это ссылается на три отдельных исходных файла. Браузер начинает работу сверху и выбирает первый формат и кодек, которые он может использовать. В мире видео формат файла, обычно называемый контейнером, может быть сохранен с помощью разных кодеков, каждый из которых имеет разные атрибуты. ( Подробнее об этом здесь .) В приведенном выше примере первым выбором является формат WebM ( который может быть закодирован с помощью кодеков VP8 или VP9 ), и поддерживается (на момент написания статьи) 78% пользователей по всему миру . Второй вариант — кодек H.265 mp4, который поддерживается на iOS и более новых компьютерах Mac . Эти кодеки более новые и имеют улучшенное сжатие данных, обеспечивая при этом такое же качество видео, как и старые видеоформаты.

Последним выбором в нашем списке является H.264 mp4, который поддерживают 92% всех пользователей по всему миру , но это более старый формат и, как таковой, он обычно намного больше, чем видео WebM или H.265. В одном примере вы можете увидеть разницу для двухминутного фильма:

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

Атрибут предварительной загрузки

Воспроизведение видео не может начаться до тех пор, пока какое-то видео не будет загружено и сохранено локально. Используя атрибут preload, вы можете контролировать, сколько видео загружается при загрузке страницы. Атрибут preload имеет три значения: auto , metadata и none .

предварительная загрузка = 'авто'

Если используется 'auto' , будет загружено все видео, независимо от того, нажимает пользователь «Воспроизвести» или нет. Это обеспечивает быстрое воспроизведение видео, поскольку видео загружается локально до того, как пользователь нажимает кнопку воспроизведения. С точки зрения использования данных (и нагрузки на сервер) это следует использовать только тогда, когда высока вероятность того, что видео будет просмотрено. В противном случае все данные полной загрузки видео будут потрачены впустую.

предварительная загрузка = 'метаданные'

Это настройка по умолчанию для предварительной загрузки в Chrome и Safari. При использовании 'metadata' загружаются первые 3% видео. Хотя это имеет те же предостережения, что и 'auto' , загрузка всего 3% видео требует гораздо меньших затрат на использование сервера/данных, чем все видео, при этом часть видео сохраняется локально для быстрого запуска видео.

предварительная загрузка = 'нет'

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

плакат

Возможно, вам захочется, чтобы изображение постера отображалось поверх окна видео перед началом воспроизведения видео:

<video src="myVideo.mp4" poster="/image/myVideoImage.jpg">

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

Элементы управления воспроизведением

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

приглушенный

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

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

петля

Чтобы создать видео, в котором контент зацикливается (например, анимированный GIF), добавьте атрибут loop . Поскольку видеофайлы обычно намного меньше анимированных GIF-файлов, этот механизм позволяет заменять GIF-файлы видеофайлами .

Автовоспроизведение видео

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

<video src="myVideo.mp4" playsinline autoplay>

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

<video src="myVideo.mp4" playsinline autoplay muted>

Заключение

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