Тэг video html5 ЧАВО

С приходом новых технологий в web стало доступно много новых возможностей. Например вставлять видео при помощи тэга video html5.

Использование тэга video html5

Использовать тэг video html5 до банального просто:

То есть указываем ссылку на видео, ширину и высоту контейнера. Всего и делов.
Список поддерживаемых форматов, которые можно указывать в качестве ссылки на video html5:

MPEG-4
Web-M
Ogg
Flash
AVI

Но есть определенные ограничения, в некоторых браузерах некоторые типы видео не поддерживаются, кроме того, важно, чтобы на компьютере смотрящего был установлен подходящий видео-кодек (но такой проблемы уже не должно возникать с середины нулевых).

В любом случае для максимальной совместимости в различных браузерах рекомендуется сделать:

Одну версию WebM (VP8 + Vorbis).
Другую версию с видео в H.264 и AAC аудио в контейнере MP4.
Третью версию с видео в Theora и аудио в Vorbis в котейнере Ogg.
Указать ссылки на все 3 видео в одном тэге <video>, и на всякий случай откатиться к Flash-плееру.

Подготовка видео к установке на сайт с тэгом video html5

Поскольку рекомендуется сделать 3 типа видео, нам потребуется подготовить видео к публикации на сайт. Что нам нужно сделать:

Определить как перевернуть видео, если это нужно (видео с некоторых камер может выглядеть перевернутым по часовой стрелке)
Выбрать какой размер видео мы будем публиковать (например, если мы не хотим делать видео в HD качестве, то можем заранее уменьшить размер видео-файла, так, чтобы оно быстрее загружалось у пользователя
Конвертировать видео с учетом переворачивания, размера и выбранных форматов при помощи видео-редактора.

По собственному опыту рекомендую Movavi — кроссплатформенный видео редактор (работает на Mac и Win).