HTML 5.3 | Элемент <video>

Категории:

Потоковый контент.
Фразированный контент.
Встроенный контент.
Если элемент имеет атрибут управления: интерактивный контент.
Ощутимый контент.

Контексты, в которых этот элемент может быть использован:

Где ожидается встроенный контент, но без предков медиа-элементов.

Модель контента:

Если элемент имеет атрибут src: ноль или более элементов дорожки <track>, то прозрачный, но без потомков медиа-элемента.

Если элемент не имеет атрибута src: ноль или более элементов источника <source>, то ноль или более элементов дорожки <track>, затем прозрачный, но без потомков медиа-элемента.

Пропуск тега в text/html:

Ни один из тегов не может быть пропущен

Атрибуты контента:

Глобальные атрибуты
src — Адрес ресурса
crossorigin — Как элемент обрабатывает перекрестные запросы
poster — Кадр плаката, отображаемый перед воспроизведением видео
preload — Подсказки, сколько буферизации медиа-ресурса, вероятно, потребуется
autoplay — Подсказка, что медиа-ресурс может быть запущен автоматически при загрузке страницы
loop — Зацикливать ли медиаресурс
muted — Отключить ли медиа-ресурс по умолчанию
controls — Показать элементы управления пользовательского агента
disableRemotePlayback — Отключено ли удаленное воспроизведение медиаресурса
width — Горизонтальный размер
height — Вертикальный размер

Допустимые значения атрибута роли ARIA:

application

Разрешенные атрибуты состояния и собственности ARIA:

Глобальные атрибуты aria- *

Любые атрибуты aria- *, применимые к роли application.

Интерфейс DOM:

interface HTMLVideoElement : HTMLMediaElement {
attribute unsigned long width;
attribute unsigned long height;
readonly attribute unsigned long videoWidth;
readonly attribute unsigned long videoHeight;
attribute DOMString poster;
};


Элемент видео <video> используется для воспроизведения видео или фильмов, а также аудиофайлов с подписями.

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

В частности, этот контент не предназначен для решения проблем доступности. Чтобы сделать видеоконтент доступным для людей с ограниченными возможностями, доступны различные функции. Подписи и дорожки на языке жестов могут быть встроены в видеопоток или в виде внешних файлов с использованием элемента дорожки <track>. Описания аудио могут быть предоставлены либо в виде отдельной дорожки <track>, встроенной в видеопоток, либо путем ссылки на файл WebVTT с элементом дорожки, который пользовательский агент может представить как синтезированную речь. WebVTT также может использоваться для предоставления заголовков глав. Для пользователей, которые вообще не хотят использовать медиа-элемент, стенограммы или другие текстовые альтернативы могут быть предоставлены путем простой ссылки на них в прозе рядом с видео-элементом <video>. [WEBVTT]

Элемент видео <video> является медиа-элементом, медиа-данные которого якобы являются видеоданными, возможно, со связанными аудиоданными.

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

Атрибуты src, preload, autoplay, loop, muted и controls являются общими для всех элементов мультимедиа.

Атрибут содержимого плаката poster дает адрес файла изображения, который пользовательский агент может показать, пока нет видеоданных. Атрибут, если он присутствует, должен содержать действительный непустой URL, который может быть заключен в пробелы.

Если указанный ресурс должен использоваться, то, когда элемент создается или когда атрибут poster устанавливается, изменяется или удаляется, пользовательский агент должен выполнить следующие шаги для определения рамки плаката элемента (независимо от значения параметра показать флаг плаката):

  1. Если существует существующий экземпляр этого алгоритма, работающий для этого элемента <video>, прервите этот экземпляр этого алгоритма без изменения кадра постера.
  2. Если значением атрибута poster является пустая строка или атрибут отсутствует, то рамка плаката отсутствует; прервать эти шаги.
  3. Разобрать значение атрибута poster относительно элемента. Если это не удается, значит, нет рамки для плаката; прервать эти шаги.
  4. Пусть request будет новым запросом, URL-адрес которого представляет собой результирующую строку URL-адреса, клиент — это объект настроек среды объекта Window для документа элемента, тип — «image», пункт назначения — «subresource», режим учетных данных — «include» и чей use-URL-credentials флаг установлен.
  5. Запрос на получение. Это должно задержать событие загрузки документа узла элемента.
  6. Если изображение, таким образом, получено, рамка плаката является этим изображением. В противном случае, нет рамки для плаката.

Примечание! Изображение, заданное атрибутом poster, афишой poster, предназначено для представления репрезентативного кадра видео (обычно одного из первых непустых кадров), который дает пользователю представление о том, на что похоже видео.

Элемент <video> представляет то, что дано для первого условия соответствия в списке ниже:

Если видеоданные недоступны (атрибут readyState элемента имеет значение HAVE_NOTHING или HAVE_METADATA, но видеоданные еще не получены вообще, или атрибут readyState элемента имеет любое последующее значение, но у медиаресурса нет видеоканала)

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

Когда элемент <video> поставлен на паузу, текущая позиция воспроизведения является первым кадром видео, и устанавливается флаг показа плаката элемента

Элемент <video> представляет его кадр постера, если таковой имеется, или же первый кадр видео.

Когда элемент <video> приостановлен, а кадр видео, соответствующий текущей позиции воспроизведения, недоступен (например, потому что видео ищет или буферизует)

Когда элемент <video> не воспроизводится и не приостанавливается (например, при поиске или остановке)

Элемент <video> представляет последний кадр видео, которое было отрендерено.

Когда элемент <video> приостановлен

Элемент <video> представляет кадр видео, соответствующий текущей позиции воспроизведения.

В противном случае (элемент video имеет видеоканал и потенциально воспроизводится)

Элемент <video> представляет кадр видео в постоянно увеличивающейся «текущей» позиции. Когда текущая позиция воспроизведения изменяется так, что последний воспроизведенный кадр больше не является кадром, соответствующим текущей позиции воспроизведения в видео, новый кадр должен быть воспроизведен.

Кадры видео должны быть получены из видео дорожки, которая была выбрана, когда цикл событий в последний раз достиг шага 1.

 

Примечание! Какой кадр в видеопотоке соответствует определенной позиции воспроизведения, определяется форматом видеопотока.

 

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

Любое аудио, связанное с медиаресурсом, должно, в случае воспроизведения, воспроизводиться синхронизировано с текущей позицией воспроизведения на эффективной громкости медиаэлемента. Пользовательский агент должен воспроизводить звук с аудиодорожек, которые были включены, когда цикл событий в последний раз достиг шага 1.

В дополнение к вышесказанному, пользовательский агент может предоставлять пользователю сообщения (такие как «буферизация», «нет загруженного видео», «ошибка» или более подробная информация), накладывая текст или значки на видео или другие области область воспроизведения элемента или другим подходящим способом.

Пользовательские агенты, которые не могут воспроизвести видео, могут вместо этого заставить элемент представлять ссылку на внешнюю утилиту воспроизведения видео или на сами видеоданные.

Когда медиаресурс элемента <video> имеет видеоканал, элемент предоставляет источник рисования, ширина которого является собственной шириной медиаресурса, высота которого является собственной высотой медиаресурса, а внешний вид — это кадр видео, соответствующий текущей позиции воспроизведения, если это доступно, или еще (например, когда видео ищет или буферизирует) его предыдущее появление, если таковое имеется, или еще (например, потому что видео все еще загружает первый кадр) черноту.


video . videoWidth
video . videoHeight

Эти атрибуты возвращают внутренние размеры видео или ноль, если размеры неизвестны.

Внутренняя ширина и внутренняя высота медиаресурса — это размеры ресурса в пикселях CSS после учета размеров ресурса, соотношения сторон, чистой апертуры, разрешения и т. д., Определенных для формата, используемого ресурсом. Если анаморфный формат не определяет, как применить соотношение сторон к измерениям видеоданных, чтобы получить «правильные» измерения, то пользовательский агент должен применить это соотношение, увеличив одно измерение и оставив другое без изменений.

IDL-атрибут videoWidth должен возвращать собственную ширину видео в пикселях CSS. IDL-атрибут videoHeight должен возвращать внутреннюю высоту видео в пикселях CSS. Если атрибут readyState элемента имеет значение HAVE_NOTHING, то атрибуты должны возвращать 0.

Всякий раз, когда внутренняя ширина или внутренняя высота видео изменяется (в том числе, например, из-за того, что выбранная видеодорожка была изменена), если атрибут readyState элемента не HAVE_NOTHING, пользовательский агент должен поставить задачу в очередь, чтобы запустить простое событие с именем resize как медиа элемент.

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

При отсутствии правил стиля, наоборот, видеоконтент должен отображаться внутри области воспроизведения элемента, чтобы видеоконтент отображался по центру в области воспроизведения в максимально возможном размере, который полностью вписывается в него, при этом соотношение сторон видеоконтента составляет сохранились. Таким образом, если соотношение сторон области воспроизведения не совпадает с соотношением сторон видео, видео будет отображаться в виде коробок с ящиками или столбцов. Области воспроизведения элемента, которые не содержат видео, ничего не представляют.

Примечание! В пользовательских агентах, которые реализуют CSS, вышеуказанное требование может быть реализовано с использованием правила стиля, предложенного в разделе §10 Рендеринг.

Внутренняя ширина области воспроизведения элемента <video> — это внутренняя ширина рамки плаката, если она доступна, и элемент в настоящее время представляет свою рамку плаката; в противном случае это внутренняя ширина видео ресурса, если таковая имеется; в противном случае внутренняя ширина отсутствует.

Внутренняя высота области воспроизведения элемента <video> — это внутренняя высота рамки плаката, если она доступна, и элемент в настоящее время представляет свою рамку плаката; в противном случае это внутренняя высота видеоресурса, если таковая имеется; в противном случае внутренняя высота отсутствует.

Размер объекта по умолчанию — ширина 300 CSS-пикселей и высота 150 CSS-пикселей. [CSS3-ИЗОБРАЖЕНИЯ]


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

Пользовательские агенты могут разрешать пользователям просматривать видеоконтент способами, более подходящими для пользователя (например, в полноэкранном режиме или в независимом окне с изменяемым размером). Подписи, субтитры или другие дополнительные визуальные треки должны оставаться доступными и видимыми при включении. Что касается других функций пользовательского интерфейса, элементы управления для включения этого не должны мешать нормальному отображению страницы, если пользовательский агент не представляет пользовательский интерфейс. Что касается других функций пользовательского интерфейса, элементы управления для включения этого не должны мешать нормальному отображению страницы, если пользовательский агент не представляет пользовательский интерфейс. Однако в таком независимом контексте пользовательские агенты могут сделать видимыми полные пользовательские интерфейсы, например, управлять воспроизведением, паузой, поиском и регулировкой громкости, даже если отсутствует атрибут controls.

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


Атрибут poster IDL автора должен отражать атрибут содержимого плаката.

Пример 84

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

В этом примере также показаны элементы управления controls и атрибуты предварительной загрузки preload.

<video controls preload="metadata">
  <source type="video/webm" src="example.webm">
  <source type="video/mp4" src="example.mp4">
  <a href="example.webm" download>Download the video file.</a>
</video>

Пример 85

В этом примере показано, как определить, когда видео не удалось воспроизвести правильно:

<script>
  function failed(e) {
    // video playback failed - show a message saying why
    switch (e.target.error.code) {
      case e.target.error.MEDIA_ERR_ABORTED:
        alert('You aborted the video playback.');
        break;
      case e.target.error.MEDIA_ERR_NETWORK:
        alert('A network error caused the video download to fail part-way.');
        break;
      case e.target.error.MEDIA_ERR_DECODE:
        alert('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
        break;
      case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
        alert('The video could not be loaded, either because the server or network failed or because the format is not supported.');
        break;
      default:
        alert('An unknown error occurred.');
        break;
    }
  }
</script>
<p><video src="example.webm" autoplay controls onerror="failed(event)"></video></p>
<p><a href="example.webm" download>Download the video file</a>.</p>
Поделись записью