Как добавить видео на 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 src="video.mp4" />

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

<video src="video.mp4"  width="400" height="300" controls="controls" poster="image.jpg">

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

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

<video>

<source src=" video. mp4" type="video/mp4"  />

<source src="video.webm" type="video/vebm"  />

<source src=" video. ogv" type="video/ogg"  />

</video>

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

<source src="video.ogv" type="video/ogg" codecs="theora, vorbis">

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

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

<video width="640" height="360" controls>

<source src="video. mp4" type="video/mp4"  />

<source src="video.webm" type="video/vebm"  />

<source src="video. ogv" type="video/ogg"  />

<object width="400" height="300" type="application/x-shockwave-flash">

<param name="movie" value=" flash-pleer.swf" /><!-- путь к флэш-плееру -->

<param name="flashvars" value="controlbar=over&amp;image= IMAGE.JPG&amp;file=VIDEO.MP4" /><!—подключение панели управления, путь к изображению и видео-файлу в формате .mp4 .flv или .swf-->

</object>

</video>


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

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

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

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

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

<link rel="stylesheet" type="text/css" href="skin/minimalist.css"><!— скин плеера -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><!-- подключение jQuery -->

<script type="text/javascript" src="flowplayer.min.js"></script><!-- подключение flowplayer -->

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

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

<div class="flowplayer" data-swf="flowplayer.swf" data-ratio="0.5">

<video width="500">

<source type="video/webm" src="video.webm">

<source type="video/mp4" src="video.mp4">

<source type="video/ogv" src="video.ogv">

</video>

</div>

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

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

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

 

7 ответов

  1. Динара
    спасибо
  2. Спасибо, нашел что хотел, а то на других сайтах не понять совсем, что написано, а у вас разжёвано все и понятно.
  3. Добрый день, а как указать видео, которое находится на жестком диске, например по пути E:\Test.mp4
    • Лучше поместить файл в ту же папку, где страница из которой видео вызывается и указать относительную ссылку. Но если нужно абсолютный путь, то можно так как вы написали src="e:\Test.mp4".
  4. Anastasia
    Спасибо за информацию! А можно в сайт вставить большое видео? К примеру фильм. Пыталась как обычное видео, но что-то вообще не загружается.
    • Можно. Только зачем? Видео нагружает сервер. Лучше выложить видео на видеохостинг, и от туда транслировать у себя на сайте.
  5. Евгений
    здравствуйте уменя вот такой вапрос как можна зделать падержку вот таких фарматах в html 5 видео плере AVI, MP4, 3GP, MPEG, MOV, FLV, F4V, WMV, MKV, WEBM, VOB, RM, RMVB, M4V, MPG, OGV, TS, M2TS, MTS

Оставить комментарий