Cодержание

HTML Video
Video Attributes (Видео атрибуты)

Руководство HTML Video

View more Tutorials:

Pуководства HTML

HTML Video
Video Attributes (Видео атрибуты)

Следуйте за нами на нашей фан-странице, чтобы получать уведомления каждый раз, когда появляются новые статьи.

Facebook

1- HTML Video

Тег <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)

2- Video Attributes (Видео атрибуты)

Как и все другие элементы (element), элемент <video> поддерживает все глобальные атрибуты (global attributes).

Помимо этого имеются другие атрибуты ниже:

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>

View more Tutorials:

Pуководства HTML