html.okpython.net
HTML и CSS для начинающих

HTML :: Тег <video>

В HTML тег <video> (от англ. videoвидеозапись) используется для добавления, воспроизведения и управления видеозаписями на веб-странице. Кроме того, его можно использовать и для воспроизведения потокового мультимедиа, используя интерфейс MediaStream.

Если между открывающим и закрывающим тегами элемента <video> содержится обычный текст, то он отображается в браузерах, которые не поддерживают этот элемент.

В данный момент браузерами поддерживается ограниченный набор кодеков, индивидуальный для каждого браузера. Поэтому, чтобы сделать произведение видеоролика максимально универсальным, необходимо кодировать видеофайлы разными кодеками и добавлять их в контейнер <video> при помощи элементов <source>.

Синтаксис

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

Атрибуты

  • autoplay – запись начинает проигрываться сразу же после загрузки страницы, при этом атрибут отменяет действие атрибута preload. Атрибут по умолчанию выключен и значений не принимает, т.е. является логическим.
  • controls – добавляет стандартную панель управления, вид которой зависит от браузера; обычно это стандартные кнопки воспроизведения, паузы, перемотки и т.д. Атрибут по умолчанию выключен и значений не принимает.
  • height – задает высоту видеоплеера в пикселях.
  • loop – зацикливает видеозапись, заставляя проигрываться ее снова после завершения. Атрибут по умолчанию выключен и значений не принимает.
  • muted – видеозапись после загрузки запускается с отключенным звуком, т.е. пользователь должен будет сам установить желаемый уровень громкости. Атрибут по умолчанию выключен и значений не принимает.
  • poster – пока видео не доступно или не воспроизводится, будет отображаться картинка, абсолютный или относительный путь к которой указывается в качестве значения атрибута. Если атрибут не указан, то браузер попытается отобразить первый кадр видеоролика.
  • preload – служит для загрузки видеофайла во время загрузки страницы, принимает три значения:
    • "none" – загрузка видеофайла начнется только после щелчка мыши по кнопке воспроизведение (используется по умолчанию);
    • "auto" – браузер сам может принимать решение о предварительной загрузке файла, при этом аудиофайл может быть загружен целиком во время загрузки страницы;
    • "metadata" – загружать только служебную информацию, например, длительность записи.
  • src – указывает путь к видеофайлу, который нужно воспроизвести. В качестве значения атрибута могут использоваться как абсолютные, так и относительные адреса (подробнее здесь).
  • width – задает ширину видеоплеера в пикселях.
  • Для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Примеры

HTML Результат htmlCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<base href="https://site.name/">
	<title>Пример №1</title>
</head>
<body>
     
<p>
  <video poster="html/html_images/textbook_images/dog_foto.jpg" controls>
   
		<source src="html_files/video/Саймон.ogg">
		<source src="html_files/video/Саймон.mp4">

		<track 
			kind="subtitles" 
			src="html_files/video/sub.en.vtt" srclang="en" 
			label="English"
		>

		<track 
			kind="subtitles" 
			src="html_files/video/sub.ru.vtt" srclang="ru" 
			label="Русский" default
		>

		Элемент video не поддерживается вашим браузером.
	
  </video> 
</p>


<p>
	Содержимое файла sub.ru.vtt в формате субтитров VTT
</p>

<p>
	WEBVTT FILE
	
	00:00.000 --> 00:08.490<br>
	Саймон смотрит в окно.<br><br>

	00:08.500 --> 00:14.700<br>
	Саймон услышал друга.<br><br>

	00:14.900 --> 00:44.000<br>
	Саймон общается с ним.
</p>
	
</body>
</html>

Пример №1