Руководство HTML Video
View more Tutorials:
Тег <video> был введен в HTML5, он помогает вам встроить video в web страницу. HTML4 на самом деле не имеет специальный тег для video, чтобы встроить video, HTML4 использует тег <embed> или <object> или <iframe> одновременно нужно установить дополнительное программное обеспечение, например Flash или QuickTime.
С тегом <video> встроить video на web странице становится проще, и вам не нужно устанавливать никакие дополнительные программные обеспечения в браузер. Почти все браузеры поддерживают HTML5, поэтому они так же поддерживают тег <video>.

<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
Атрибут controls говорит браузеру отобразить элементы управления video, например кнопку play, кнопку паузы, звука,..
Тег <source> появляется в теге <video> предоставляет альтернативный ресурс video для браузера. Браузер может использовать один из предоставленных ресурсов video поочередность идет сверху вниз.
Текстовое содержание в теге <video> отображается только если браузер не поддерживает тег <video> или не поддерживает никакие форматы video предоставленных тегами <source>.
video-example.html
<!DOCTYPE html> <html> <head> <title>Video</title> <meta charset="UTF-8"> </head> <body> <h3>Video example:</h3> <video width="320" height="240" controls> <source src="../resources/mov_bbb.mp4" type="video/mp4"> <source src="../resources/mov_bbb.ogg" type="video/ogg"> Your browser does not support the video or formats. </video> </body> </html>
Браузеры и поддержка разных форматов video:
Browser | MP4 (video/mp4) |
WebM (video/webm) |
Ogg (video/ogg) |
---|---|---|---|
Internet Explorer | ![]() |
||
Chrome | ![]() |
![]() |
![]() |
Firefox | ![]() |
![]() |
![]() |
Safari | ![]() |
||
Opera | ![]() (>= 25) |
![]() |
![]() |
Как и все другие элементы (element), элемент <video> поддерживает все глобальные атрибуты (global attributes).
- TODO Link!
Помимо этого имеются другие атрибуты ниже:
- src
- controls
- autoplay
- buffered
- crossorigin
- currentTime
- duration (Read only)
- height
- width
- loop
- muted
- playsinline
- poster
- preload
autoplay
Данный атрибут является видом данных boolean. Если появляется в элементе <video> video автоматически начинает воспроизведение как можно раньше (После того как оно скачало достаточно данных для воспроизведения).
<h3>autoplay attribute</h3> <video width="320" height="240" autoplay controls> <source src="../resources/mov_bbb.mp4" type="video/mp4"> <source src="../resources/mov_bbb.ogg" type="video/ogg"> Your browser does not support the video or formats. </video>
- Примечание: Чтобы отключить свойство авто-воспроизведения у <video> вы должны убрать атрибут autoplay, настройка autoplay="false" может быть недействительной.
- Некоторые браузеры (Например Chrome 70.0) не могут автоматически проигрываться если <video> имеет атрибут muted.
controls
Если данный атрибут имеется, браузер предоставит управления, помогающие пользователю управлять пере-воспроизведением (playback) video, управлять звуком, поиском (seeking), пауза (pause), возобновить воспроизведение(resume playback), скачать,...
<h3>Video with controls:</h3> <video width="320" height="240" controls> <source src="../resources/mov_bbb.mp4" type="video/mp4"> <source src="../resources/mov_bbb.ogg" type="video/ogg"> Your browser does not support the video or formats. </video> <h3>Video without controls:</h3> <video width="320" height="240"> <source src="../resources/mov_bbb.mp4" type="video/mp4"> <source src="../resources/mov_bbb.ogg" type="video/ogg"> Your browser does not support the video or formats. </video>
Ниже является изображение показывающее разницу между <video> имеющим атрибут controls, и <video> без атрибута controls:

duration
Атрибут duration возвращает число (вида double), он дает знать длину video в милисекундах. Если video не имеет источника или недействительный источник, он возвращает NaN (Not a Number). Если источник не может определить время окончания, он возвращает +Infinite, например лайв video прямой трансляции (live stream video).
duration-attr-example.html
<!DOCTYPE html> <html> <head> <title>Video</title> <meta charset="UTF-8"> <script> function showDuration() { var videoElement = document.getElementById("myVideo"); alert("Duration: " + videoElement.duration +" Milliseconds!"); } </script> </head> <body> <h3>Video duration attribute:</h3> <video id="myVideo" width="320" height="240" controls> <source src="../resources/mov_bbb.mp4" type="video/mp4"> <source src="../resources/mov_bbb.ogg" type="video/ogg"> Your browser does not support the video or formats. </video> <br/> <button onclick="showDuration()">Duration?</button> </body> </html>
width/height
Атрибут width/height используется для определения длины и ширины области отображения video, это абсолюное число (не поддерживает %)
loop
Данный атрбибут является видом данных boolean, если этрт атрибут имеется в элементе <video> video воспроводится сначала, когда подходит к концу.
loop-attr-example.html
<video width="320" height="240" loop controls> <source src="../resources/mov_bbb.mp4" type="video/mp4"> <source src="../resources/mov_bbb.ogg" type="video/ogg"> Your browser does not support the video or formats. </video>
muted
Атрибут muted имеет вид boolean, если он появляется в элементе <video> video инициализируется в состоянии отключенного звука. Его значение по умолчанию является false.
muted-attr-example.html
<video width="320" height="240" muted controls> <source src="../resources/mov_bbb.mp4" type="video/mp4"> <source src="../resources/mov_bbb.ogg" type="video/ogg"> Your browser does not support the video or formats. </video>
poster
Атрибут poster позволяет вам определить URL изображения, чтобы отобразить вначале, когда video еще не вопроизведено.
<video width="320" height="240" poster ="poster.png" controls> <source src="../resources/mov_bbb.mp4" type="video/mp4"> <source src="../resources/mov_bbb.ogg" type="video/ogg"> Your browser does not support the video or formats. </video>
preload
Данный атрибут предоставляет подсказку браузеру, чтобы принести самое лучшее впечатление пользователю. Его возможные значения:
Значение | Описание |
none | Подсказывает браузеру, что не стоит заранее скачивать (preload) video không. Это значит когда пользователь нажимает на кнопку "Start", только тогда браузер начинает скачивать содержание video. |
metadata | Подсказывает браузеру, что стоит извлечь метаданные (metadata) у video, например длину, объем,... |
auto | Подсказывает браузеру, что стоит скачать содержание video, даже когда пользователь не ожидает этого. |
"empty string" | Если вы предоставите пустое значение атрибуту preload, он начне работать так же как значение auto. |
Значение по-умолчанию у preload отличается для разных браузеров. Особенность HTML5 рекомендует браузерам использовать "metadata" как значение по-умолчанию.
Примечание: Атрибут preload является только подсказкой для браузера, браузер может не выполнить данную подсказку. Например если <video> имеет атрибут autoplay=true то содержание video будет автоматически скачано браузером.
playsinline
Экраны устройств использующих Android или iOS довольно маленькие, поэтому при просмотре video на браузере данных устройств, оно автоматически воспроизводит video в полноэкранном режиме (Fullscreen). Атрибут playsinline является видом boolean, он помогает браузеру предотвратить действие выше.
<video width="320" height="240" playsinline controls> <source src="../resources/mov_bbb.mp4" type="video/mp4"> <source src="../resources/mov_bbb.ogg" type="video/ogg"> Your browser does not support the video or formats. </video>