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