Как добавить видео на лендинг при помощи тегов html5?

вставка видео при помощи html5

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

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

Как вставить видео на сайт при помощи тегов html5

В общем случае, для того чтобы встроить видео на сайт при помощи тега html5, достаточно одной строчки:

<video src="video/demo.mp4"></video>

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

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

<video poster="demo.jpg">
 <source src="video/demo.mp4" type="video/mp4" />
 <source src=" video/demo.webm" type="video/webm"/>
 <source src=" video/demo.ogv" type="video/ogg"/>
 Формат не поддерживается
</video>

Таким образом, браузер пройдется по коду и выберет тот формат, который он может воспроизвести. Но это еще не все. Для того, чтобы сэкономить время, которое браузер тратит на поиск нужной строки (в которой находиться заветный формат) и попыток начать загрузку, мы указали атрибут “type”, в котором указан формат видео.

Дело в том, что браузер в первую очередь проверяет его.  Атрибут “poster” – задает изображение, которое будет выводиться до начала воспроизведения. (Если быть точным, то до определения того формата, который может воспроизвести)

Но и это еще не все.  Старые браузеры не поддерживают теги html5 (ну, или частично поддерживают). В таком случае нам необходимо подстраховаться и сказать браузеру, чтобы он пытался воспроизвести видео при помощи flash– плеера.

<video controls poster="demo.jpg">
 <source src="demo.mp4" type="video/mp4" />
 <source src="demo.webm" type="video/webm"/>
 <source src="demo.ogv" type="video/ogg"/>
 <object><embed src="demo.mp4" type= "application/x-shockwave-flash" allowfullscreen="false" allowscriptaccess="always" /></object>
 Формат не поддерживается
</video>

Как вы могли заметить, я добавил атрибут "controls" - для того, чтобы появились элементы управления, такие как перемотка, пауза и т.д. А также тег <object>. Он говорит браузеру что нужно делать, если не один из форматов невозможно воспроизвести. В нашем случае - это попытка открыть видео во flash-плеере и, в случае неудачи, выдать сообщение о том, что формат не поддерживается.

Существуют и дополнительные атрибуты, которые можно задать тегу <video>. Вот основные из них:

  • autoplay - автоматическое начало воспроизведения видео.
  • height, width - высота и ширина.
  • preload - буферизация видео (предзагрузка как в ютубе)

А на сегодня - все. Теперь вы знаете, как добавить видео на сайт при помощи тегов html5. Скоро я расскажу вам, как встроить видео на сайт из Youtube. Пока!

Добавить комментарий