Как разместить видео у себя на сайте

Для хранения видео контента для своего сайта можно:

1. воспользоваться услугами одного из видео хостингов, таких как youtube или vimeo,
2. хранить видео у себя на сервере.

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

<iframe width="560" height="315" src="http://www.youtube.com/embed/mW6pEKxCOwM" frameborder="0" allowfullscreen></iframe>

Во втором случае, для размещения видео, вы можете использовать тэг video, который появился в спецификации html5.
Последовательность действий для реализации второго варианта такова:

1. Размещаем контейнер видео на странице
2. Подготавливаем файлы видео
3. Настраиваем веб сервер
4. Наслаждаемся результатом

1. Размещение контейнера видео на странице

В общем случае, код для вставки контейнера для видео будет иметь следующий вид

   <video poster='movie.jpg' width=640 height=480 >
      <source src='movie.webm' type='video/webm' />
      <source src='movie.ogv' type='video/ogg' />
      <source src='movie.mp4' type='video/mp4' />
   </video>

Тэг video содержит ряд атрибутов, которыми можно настраивать внешний вид и поведение видео объекта на странице.
Ниже приведены наиболее популярные атрибуты.

Атрибут	Описание
width	указывает ширину области видеоролика
height	указывает высоту области видеоролика
poster	указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится
controls	добавляет панель управления к видеоролику
autoplay	видео начинает воспроизводиться сразу же, после загрузки страницы
loop	видео будет воспроизводиться в цикле

В нашем примере мы указали ширину (width=640), высоту (height=480) и ссылку на картинку (poster="movie.jpg"), которая будет занимать место видео, до начала воспроизведения. Вложенные тэги source указывают на источники видео.

2. Подготовка файлов видео

На текущий момент, производители браузеров не пришли к соглашению о едином формате видео. В приведенной таблице указано, какой кодек какими браузерами поддерживается.

Видео кодек	Поддерживаемые браузеры
MP4 / H.264	Firefox, IE9-10, Safari
WebM / VP8	Chrome, Firefox, Opera
Ogg / Theora	Chrome, Firefox, Opera

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

• mp4,
• webm,
• ogv.

Что бы преобразовать исходное видео к указанным форматам, можно использовать следующие утилиты ffmpeg и ffmpeg2theora. Это утилиты с открытым исходным кодом и могут быть использованы на разных операционных системах, например Linux, Windows, MacOS.
С помощью ffmpeg осуществляется конвертирование в форматы mp4 и webm.
Утилита ffmpeg2theora позволяет корректно конвертировать видео в формат ogg.
Формат использования утилит следующий:

 
 ffmpeg -i <исходный файл> -f <целевой формат> <целевой файл>
 ffmpeg2theora -o <целевой файл ogg> <исходный файл>

Допустим, наш исходный файл называется movie.mov, тогда набор команд для генерации всех необходимых форматов будет следующим

ffmpeg -ss 1 -quality best -i movie.mov -y -s movie.jpg
ffmpeg -i movie.mov -f mp4 movie.mp4
ffmpeg -i movie.mov -f webm movie.webm
ffmpeg2theora -o movie.ogv movie.mov

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

3. Настройка веб сервера

Если вы используете в качестве веб-сервера Apache, вам необходимо добавить следующий код в файл настройки httpd.conf.

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

Если это невозможно, например настройками сервера заведует хостинг, просто создайте файл .htaccess в той же директории, где и видео файлы с аналогичным содержимым.

4. Результат

В результате вышеописанных операций вы имеете на своей странице встроенный объект видео, доступный для просмотра как с стационарных компьютеров, так и с мобильных устройств (планшеты, телефоны). Например такой ролик про танцующего Мэтта.