Как добавить видео на HTML-страницу

Вебмастеру

Что нужно, чтобы вставить видео в HTML-страницу? Во первых, знание html, во вторых азы работы с видео, в третьих нужные программы под рукой.

Вкратце: расширение файла .mp4, .avi и другие это только контейнер в котором содержится сжатый видеопоток и сжатый аудиопоток связанные между собой. И чтобы видео на сайте работало правильно, нужно чтобы видео и аудио были сжаты правильными кодеками (кодер+декодер) в правильных контейнерах.

Для воспроизведения видео в интернете используют всего три формата видео-файлов .mp4, .webm и .ogv. И не забываем, что кодировать нужно только определенными кодеками. Иначе браузер не сможет его отобразить. Ниже привожу таблицу, которая наглядно демонстрирует взаимосвязь браузера, контейнера (формат видео) и кодека.

контейнер (видеокодек+аудиокодек)

Chrome

IE

Safari

Opera

Firefox

iPhone

Android

MP4 (4H.264 + AAC)

+

+

+

-

-

+

+

WebM (VP8 + Vorbis)

+

-

-

+

+

-

-

Ogv (Theora + Vorbis)

+

-

-

+

-

-

-

Для конвертации я использую Miro Video Converter. Простая программа без лишних настроек, которая в автоматическом режиме конвертирует видео в нужный формат .mp4, .webm и .ogv.

С видео, думаю понятно. Теперь переходим к коду. Для вывода видео в HTML5 используется специальный тег <video> просто прописываем путь как и к картинке через src:

Тегу <video> можно задать параметры width – ширина, height – высота,  controls – панель управления, poster – изображение и другие.

Но в таком случае видео будет проигрываться не во всех браузерах, смотрите таблицу. Чтобы достичь кросбаузерности используют тег <source>

Тогда код для вставки принимает такой вид:

В параметре type указывается формат файла, тогда браузер определяет сможет ли воспроизвести видео без предварительного скачивания. Иногда также прописывают параметр codecs, где указывают, каким кодеком закодирован файл:

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

Таким образом, нужно вставить код именно для таких безнадежно устаревших юзеров браузеров:

Код, мягко говоря, разросся 🙂 Чтобы не заморачиваться, можно генерировать код автоматически используя вот этот сервис. Очень прост в использовании достаточно галочками определить настройки и указать путь к файлам, в результате получаем код для вставки в html -страницу.

И снова можно было бы поставить точку, однако нужно упомянуть, что ещё для вставки видео можно использовать сторонние плееры, которые упрощают вставку видео и к тому же имеют свои настройки и предустановленные стили.

Мне больше всего нравится flowplayer. Дальше опишу как установить flowplayer на html-сайт.

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

Между тегами <head> </head> вставляем:

Чтобы сменить скин, меняем в коде minimalist.css на понравившийся из папки skin.

В нужном месте страницы вставляем:

Путь к видео может быть как относительный, так и абсолютный. data-ratio – размер плеера. video.ogv можно не делать у меня по крайней мере и без него воспроизводится во всех браузерах.

Преимущество этого плеера в том что, если браузер устарел и не отображает потоковое видео, оно воспроизводится как флэш-видео. Для этого не нужно ничего дописывать.

Пример плеера можно посмотреть вот здесь.

Поделиться с друзьями
Яковенко Андрей

Занимаюсь разработкой сайтов на cms WordPress, Joomla, DLE, OpenCart с 2011 года.
На данный момент занимаюсь клиентской поддержкой, доработками сайтов. А так же даю консультации и уроки по работе с этими cms.

Оцените автора
Yakovenko&Co
Добавить комментарий

  1. Динара

    спасибо

    Ответить
  2. ComKina

    Спасибо, нашел что хотел, а то на других сайтах не понять совсем, что написано, а у вас разжёвано все и понятно.

    Ответить
  3. Алексей

    Добрый день, а как указать видео, которое находится на жестком диске, например по пути E:Test.mp4

    Ответить
    1. Яковенко Андрей автор

      Лучше поместить файл в ту же папку, где страница из которой видео вызывается и указать относительную ссылку. Но если нужно абсолютный путь, то можно так как вы написали src=”e:\Test.mp4″.

  4. Anastasia

    Спасибо за информацию! А можно в сайт вставить большое видео? К примеру фильм. Пыталась как обычное видео, но что-то вообще не загружается.

    Ответить
    1. Яковенко Андрей автор

      Можно. Только зачем? Видео нагружает сервер.
      Лучше выложить видео на видеохостинг, и от туда транслировать у себя на сайте.

  5. Евгений

    здравствуйте уменя вот такой вапрос как можна зделать падержку вот таких фарматах в html 5 видео плере AVI, MP4, 3GP, MPEG, MOV, FLV, F4V, WMV, MKV, WEBM, VOB, RM, RMVB, M4V, MPG, OGV, TS, M2TS, MTS

    Ответить
  6. Павел

    Ну блин, что за фигня. почему не сделать нормальный просмотрщик кода!? Копируется пустота и копирайтинг, что пустота скопировалась

    Ответить