Что нужно, чтобы вставить видео в 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&image= IMAGE.JPG&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="https://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 можно не делать у меня по крайней мере и без него воспроизводится во всех браузерах.
Преимущество этого плеера в том что, если браузер устарел и не отображает потоковое видео, оно воспроизводится как флэш-видео. Для этого не нужно ничего дописывать.
Пример плеера можно посмотреть вот здесь.
8 ответов