С приходом новых технологий в 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).