Что нужно, чтобы вставить видео в 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:
|
1 |
<video src="video.mp4" /> |
Тегу <video> можно задать параметры width – ширина, height – высота, controls – панель управления, poster – изображение и другие.
|
1 |
<video src="video.mp4" width="400" height="300" controls="controls" poster="image.jpg"> |
Но в таком случае видео будет проигрываться не во всех браузерах, смотрите таблицу. Чтобы достичь кросбаузерности используют тег <source>
Тогда код для вставки принимает такой вид:
|
1 2 3 4 5 6 7 8 9 |
<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, где указывают, каким кодеком закодирован файл:
|
1 |
<source src="video.ogv" type="video/ogg" codecs="theora, vorbis"> |
На этом можно было бы остановиться, НО есть пользователи, которые используют старые версии браузеров, которые вообще не умеют работать с видео, хотя воспроизводят флэш-видео благодаря установленному флэш-плееру.
Таким образом, нужно вставить код именно для таких безнадежно устаревших юзеров браузеров:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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> вставляем:
|
1 2 3 4 5 |
<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.
В нужном месте страницы вставляем:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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 можно не делать у меня по крайней мере и без него воспроизводится во всех браузерах.
Преимущество этого плеера в том что, если браузер устарел и не отображает потоковое видео, оно воспроизводится как флэш-видео. Для этого не нужно ничего дописывать.
Пример плеера можно посмотреть вот здесь.
спасибо
Спасибо, нашел что хотел, а то на других сайтах не понять совсем, что написано, а у вас разжёвано все и понятно.
Добрый день, а как указать видео, которое находится на жестком диске, например по пути E:Test.mp4
Лучше поместить файл в ту же папку, где страница из которой видео вызывается и указать относительную ссылку. Но если нужно абсолютный путь, то можно так как вы написали src=”e:\Test.mp4″.
Спасибо за информацию! А можно в сайт вставить большое видео? К примеру фильм. Пыталась как обычное видео, но что-то вообще не загружается.
Можно. Только зачем? Видео нагружает сервер.
Лучше выложить видео на видеохостинг, и от туда транслировать у себя на сайте.
здравствуйте уменя вот такой вапрос как можна зделать падержку вот таких фарматах в html 5 видео плере AVI, MP4, 3GP, MPEG, MOV, FLV, F4V, WMV, MKV, WEBM, VOB, RM, RMVB, M4V, MPG, OGV, TS, M2TS, MTS
Ну блин, что за фигня. почему не сделать нормальный просмотрщик кода!? Копируется пустота и копирайтинг, что пустота скопировалась