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

View more Tutorials:

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 16x16    
Chrome 16x16 16x16 16x16
Firefox 16x16 16x16 16x16
Safari 16x16    
Opera 16x16
(>= 25)
16x16 16x16

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

Как и все другие элементы (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>

View more Tutorials: