Мультимедиа

Видео

Последнее обновление: 21.04.2016

Для воспроизведения видео в HTML5 используется элемент video. Чтобы настроить данный элемент, мы можем использовать следующие его атрибуты:

  • src: источник видео, это может быть какой-либо видеофайл

  • width: ширина элемента

  • height: высота элемента

  • controls: добавляет элементы управления воспроизведением

  • autoplay: устанавливает автовоспроизведение

  • loop: задает повторение видео

  • muted: отключает звук по умолчанию

Хотя мы можем установить ширину и высоту, но они не окажут никакого влияния на аспектное отношения ширины и высоты самого видео. Например, если видео имеет формат 375×240, то, к примеру, при настройках width="375" height="280" видео будет центрироваться на 280-пиксельном пространстве в HTML. Что позволяет избавить видео от искажений, которые были бы при растягивании.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Видео в HTML5</title>
	</head>
	<body>
		<video src="cats.mp4" width="400" height="300" controls ></video>
	</body>
</html>
Видео в HTML5

Применим атрибуты autoplay и loop:

<video src="cats.mp4" width="400" height="300" controls autoplay loop ></video>

Теперь видео будет автоматически проигрываться бесконечное число раз.

Если при воспроизведении надо отключить звук, то мы можем воспользоваться атрибутом muted:

<video src="cats.mp4" width="400" height="300" controls muted ></video>

Атрибут preload

Еще один атрибут - preload призван управлять загрузкой видео. Он принимает следующие значения:

  • auto: видео и связанные с ним метаданные будут загружаться до того, как видео начнет воспроизводиться.

  • none: видео не будет загружаться в фоне, пока пользователь не нажмет на кнопку начала проигрывания

  • metadata: в фоне до воспроизведения будут загружаться только метаданные (данные о формате, длительности и т.д), само видео не загружается

<video src="cats.mp4" width="400" height="300" controls preload="auto"></video>

Атрибут poster

Атрибут poster позволяет установить изображение, которое будет отображаться до запуска видео. Этому атрибуту в качестве значения передается путь к изображению:

<video src="cats.mp4" width="400" height="300" controls poster="mycat.jpg"></video>

Поддержка форматов видео

Главной проблемой при использовании элемента video является поддержка различными веб-браузерами определенных форматов. С помощью вложенных элементов source можно задать несколько источников видео, один из которых будет использоваться:

<video width="400" height="300" controls>
	<source src="cats.mp4" type="video/mp4">
	<source src="cats.webm" type="video/webm">
	<source src="cats.ogv" type="video/ogg">
</video>

Элемент source использует два атрибута для установки источника видео:

  • src: путь к видеофайлу

  • type: тип видео (MIME-тип)

Если браузер не поддерживает первый тип видео, то он пытается загрузить второй видеофайл. Если же и тип второго видеофайла не поддерживается, то браузер обращается к третьему видеофайлу.

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850