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

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

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

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

  • MPEG-4
  • Web-M
  • Ogg
  • Flash
  • AVI

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

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

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

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

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

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

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

5
Понравилась или помогла статья?
Купите мне кофеКупите мне кофе