Как добавить видео на свой сайт с использованием тега video в html5

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

Самый простой способ вывести видео на странице это прописать такой код:

<video id="movie" width="865" height="385" src="video/demidov-park-promo.mp4" poster="images/screenshot.jpg" controls="controls" preload="auto"></video>

Где указан

  • id — идентификатор для тега, размеры видео (ширина, высота),
  • src — путь к видеофайлу, poster — картинка, которая будет заставкой для окна видео,
  • controls — подключение встроенной в браузер панели управления для видео (у каждого браузера свои элементы управления),
  • preload — возможность начать загрузку видео сразу при при открытии страницы, что позволит запустить видео без задержек на загрузку, которая при стандартных настройках начнется только после нажатия кнопки Play.

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

Но во время размещения видео столкнулись с некоторыми проблемами, потому как разные браузеры поддерживают разные кодеки и поэтому не все воспроизводят видео в формате .mp4. Пришлось искать программы для конвертации видео в нужные форматы, помогли эти программы:

DVDVideoSoft Free Studio — программа для конвертации видео в формат .ogv
FreeWebMVideoConverter — программа для конвертации видео в формат .webm

И на сайте разместили по итогу такой код для вывода видео:

<video id="movie" width="865" height="385" poster="images/screenshot.jpg" controls="controls" preload="auto">
  <source src="video/demidov-park-promo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  <source src="video/demidov-park-promo.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="video/demidov-park-promo.ogv" type='video/ogg; codecs="theora, vorbis"' />
  <object id="videoplayer55" type="application/x-shockwave-flash" data="video/uppod.swf" width="865" height="385">
    <param name="bgcolor" value="#ffffff" />
    <param name="allowFullScreen" value="true" />
    <param name="allowScriptAccess" value="always" />
    <param name="movie" value="video/uppod.swf" />
    <param name="flashvars" value="comment=video_flv&amp;m=video&amp;file=demidov-park-promo.mp4" />
  </object>
</video>

Благодаря такому коду видео будет воспроизводиться в любых браузерах, а если в каких-то и не откроется, тогда сработает последнее правило и видео откроется с помощью flash-проигрывателя.

Могут возникнуть проблемы с MIM-типами. MIM-типы — часть значения атрибута type у тега source. Но добавление атрибута type не является достаточным, вы также должны убедиться, что ваш веб-сервер включает в HTTP-заголовок Content-Type соответствующий MIME-тип.

Если вы применяете веб-сервер Apache или его производные, то можете использовать директиву AddType в httpd.conf или файле htaccess расположенный в той директории, где вы храните ваши видеофайлы. Если вы используете другой веб-сервер, обратитесь к документации вашего сервера о том, как установить HTTP-заголовок Content-Type для определенных типов файлов.

Добавьте в свой файл htaccess в корне сайта такие правила:

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

Первая строка предназначена для видео в контейнере Ogg. Вторая строка для видео в контейнере MPEG-4. Третья для WebM. Установите это один раз и забудьте. Если вы не указали эти директивы, ваше видео может не играть в некоторых браузерах, даже если включены MIME-типы в атрибуте type вашего HTML-кода.

Вот так выглядит прогрыватель видео в Firefox:
video-html5

Как подключить нестандартный шрифт к сайту с помощью @font-face

У многих дизайнеров, которые создают серьезные и интересные макеты, есть в наличии масса уникальных и…

Как увеличить скорость загрузки страниц на сайте

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

Выпадающий блок при наведении на родительский элемент

Делал для одного сайта выплывающие блоки при наведении на родительский элемент. В принципе, нет ничего…

Овальная кнопка с помощью CSS

Нашел на просторах сети интересную овальную кнопку, которая построена только на CSS3 без использования графических…

Ответить