Тег <video>

HTML 5 предоставляет тег <video>, который позволяет вставлять видео на веб-странице, а так же воспроизводить и управлять его настройками, используя стандартные теги и атрибуты (без каких-либо flash плагинов и так далее). Тег <video> имеет обязательный закрывающий тег. Через атрибут src либо тег <source>, вложенный в тег <video>, задается путь к видео-файлу. Выглядит это так:

            
  <video>
    <source src="video1.mp4">
  </video>
			
            

В теге <source> лучше указывать несколько форматов видео (mp4, ogv, webm), так как различные браузеры поддерживают разные форматы. Так же желательно не забыть указать type, чтобы браузер быстрее нашел нужный ему формат. Это будет гарантировать сто процентное отображение и воспроизведение видео во всех браузерах. Код будет выглядеть следующим образом:

            
  <video>
    <source src="video1.mp4" type="video/mp4">
    <source src="video1.ogv" type="video/ogg">
    <source src="video1.webm" type="video/webm">
  </video>
			
            

Если тег <video> все же не будет поддерживаться в каком-то браузере, можно указать текст после тега <source>, который увидит посетитель или использовать старый способ вставки видео.

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

src – задает путь к видео-файлу.

autoplay – автоматическое воспроизведение видео при загрузке веб-страницы.

loop – зацикливает видеоролик (после завершения воспроизводит его заново).

controls - отображает панель управления к видео.

height - устанавливает высоту видеопроигрывателя.

width – устанавливает ширину видеопроигрывателя.

poster - Указывает адрес картинки, которая будет служить заставкой в видео.

preload – видео будет загружаться вместе с загрузкой веб-страницы.

Пример:

        
<!DOCTYPE HTML>
<html>
  <head>
    <title>Тег VIDEO</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>Живая природа</h1>
    <video controls="controls" width="500" poster="nature.jpg">
      <source src="video/live-nature.ogv" type="video/ogg">
      <source src="video/live-nature.mp4" type="video/mp4">
      <source src="video/live-nature.webm" type="video/webm">
      <p>Ваш браузер не воспроизводит видео. <a href="video/live-nature.mp4">Скачать видео</a></p>
    </video>
  </body>
</html>
			 
            
Смотреть пример