Тег <video>

IE
9.0
Chrome
3.0+
Opera
10.5+
Safari
3.1+
Firefox
3.5+
Android
2.0+
iOS
2.0+

Тег <source> добавляет, воспроизводит и управляет настройками видеоролика на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>.

Закрывающий тег обязателен.

Список поддерживаемых браузерами кодеков ограничен и приведен ниже:

IE
H.264
Chrome
ogg, H.264, WebM
Opera
ogg, WebM
Safari
H.264
Firefox
ogg, WebM

Для универсального воспроизведения в указанных браузерах видео кодируют с помощью разных кодеков и добавляют файлы одновременно через тег <source>.

Атрибуты

autoplay: Видео начинает воспроизводиться автоматически после загрузки страницы
controls: Добавляет панель управления к видеоролику
height: Задает высоту области для воспроизведения видеоролика
loop: Повторяет воспроизведение видео с начала после его завершения
poster: Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится
preload: Используется для загрузки видео вместе с загрузкой веб-страницы
src: Указывает путь к воспроизводимому видеоролику
width: Задает ширину области для воспроизведения видеоролика.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег video</title>
 </head>
 <body>
  <video width="320" height="240" controls="controls">
   <source src="video/video.ogv" type='video/ogg; codecs="theora, vorbis"'>
   <source src="video/video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
   <source src="video/video.webm" type='video/webm; codecs="vp8, vorbis"'>
   Тег video не поддерживается вашим браузером. <a href="video/video.mp4">Скачайте видео</a>.
  </video>
 </body>
</html>

Результат примера показан на рисунке ниже:

Воспроизведение видеофайла