Тег video

Элемент <video> </video>

В HTML5 добавили новый тег video, он отвечает за воспроизведение видеофайлов на веб-странице, причем для воспроизведения видеофайлов не нужны дополнительные плагины или кодеки сторонних производителей, поддержка видеофайлов уже включена в спецификацию HTML5.

Пример кода тега <video>

Пример добавления видеофайла при помощи тега <video>:

<video width="560" height="315" controls="controls" poster="teg-video.jpg">
 <source src="norwegian-army-harlem-shake.ogv" />
 <source src="norwegian-army-harlem-shake.mp4" />
</video>

Результат:

Автор ролика: Норвежская армия,
Название: Garlem Shake.
Скачать файл можно c Яндекс.Диска: в формате OGG, в формате MP4,
Постер: http://yadi.sk/d/i24KhBiT3o0Vb

Тег <source /> содержит в себе атрибут src=" ", чьим значением выступает адрес хранения файлов мультимедиа.

В нашем примере, тег <source /> указывает на два файла хранящих одну и ту же информацию, но имеющих различное расширение. Если ваш браузер не поддерживает файлы с расширением .ogv, то он будет проигрывать файлы с расширением .mp4

Таблица поддержки браузерами видео кодеков и форматов

Каждый браузер поддерживает только определённые видео форматы, поэтому если вы хотите чтобы ваши ролики можно было просмотреть на всех браузерах, то нужно добавить как минимум два файла, один с расширением .mp4, а другой с расширенеим .ogv

У видео формата OGG/VORBIS, расширение файлов будет .ogv
У видео формата h.264, расширение файлов будет .mp4

DVDVideoSoft - бесплатная русскоязычная программа для конвертирования и редактирования аудио/видео файлов различных форматов.

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

Атрибуты тега <video>

1. autoplay="autoplay" - начинает проигрывать композицию сразу после загрузки веб-страницы, по умолчанию атрибут отключён (и никогда его не включайте),
2. controls="controls" - создает панель управления видеофайлом, по умолчанию атрибут отключён,
3. height=" " - задаёт высоту области воспроизведения видеофайла. По умолчанию имеет значение 150px или равен высоте постера, если задан атрибут poster=" ",
4. width=" " - задаёт ширину области воспроизведения видеофайла. По умолчанию имеет значение 300px или равен ширине постера, если задан атрибут poster=" ",
5. loop="loop" - заного запускает видеофайл, после окончания его воспроизведения, по умолчанию атрибут отключён,
6. poster="адрес" - указывает путь к изображению, которое показывается, когда видеофайл отсутствует или еще не запущен,
7. preload="auto/metadata/none" - загружает видеофайл в проигрыватель одновременно с загрузкой веб страницы, но не воспроизводит его, по умолчанию имеет значение none
Определения значений:
auto - загружает видеофайл,
metadata - загружает только служебную информацию, например: первый кадр, размеры видео, продолжительность и т.д.,
none - не загружает видеофайл.
Атрибут preload=" " не работает, если включен атрибут autoplay=" "
8. src="адрес" - указывает путь к видеофайлу.

Читать далее: тег source