Элемент <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>

autoplay="autoplay" — начинает проигрывать композицию сразу после загрузки веб-страницы, по умолчанию атрибут отключён (ps: и никогда его не включайте :)).

controls="controls" — создает панель управления видеофайлом, по умолчанию атрибут отключён.

height=" " — задаёт высоту области воспроизведения видеофайла. По умолчанию имеет значение 150px или равен высоте постера, если задан атрибут poster=" ".

width=" " — задаёт ширину области воспроизведения видеофайла. По умолчанию имеет значение 300px или равен ширине постера, если задан атрибут poster=" ".

loop="loop" — заного запускает видеофайл, после окончания его воспроизведения, по умолчанию атрибут отключён.

poster="адрес" — указывает путь к изображению, которое показывается, когда видеофайл отсутствует или еще не запущен.

preload="auto/metadata/none" — загружает видеофайл в проигрыватель одновременно с загрузкой веб страницы, но не воспроизводит его, по умолчанию имеет значение none
Определения значений:
auto — загружает видеофайл,
metadata — загружает только служебную информацию, например: первый кадр, размеры видео, продолжительность воспроизведения и т.д.,
none — не загружает видеофайл.
Атрибут preload=" " не работает, если включен атрибут autoplay=" "

src="адрес" — указывает путь к видеофайлу.

В независимости от заданной ширины или высоты, видеофайл сохраняет пропорции показа видео.

Тегом video можно управлять через CSS.

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