Html5 video poster: Атрибут poster | htmlbook.ru

Leave a Comment / Html / By /

HTML5 | Видео

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

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

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

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

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

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

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

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

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

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

Что позволяет избавить видео от искажений, которые были бы при растягивании.


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

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


<video src="cats.mp4" controls autoplay loop ></video>

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

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


<video src="cats.mp4" controls muted ></video>

Атрибут preload

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

  • auto

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

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

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

<video src="cats.mp4" controls preload="auto"></video>

Атрибут poster

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

<video src="cats.mp4" controls poster="mycat.jpg"></video>

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

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


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

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

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

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

JS свойства только video объекта

Такие JS свойства медиа объекта как width, height, videoWidth, videoHeight и poster доступных только для видео элемента и позволяют устанавливать размер области воспроизведения видео контента и рисунок заставку для видео.

 

Свойства только для Video:

// JS свойства, применимые только для video объекта 
           свойство unsigned long width;
           свойство unsigned long height;
  readonly свойство unsigned long videoWidth;
  readonly свойство unsigned long videoHeight;
           свойство DOMString poster;

 

 

.

width и .height
 //unsigned long, чтение, изменение, default = 0
video.width [ = число unsigned long в px CSS]
video.height [ = число unsigned long в px CSS]

Свойства video.width и video.height присутствуют из медиа элементов только у видео элемента и доступны для чтения и изменения. Эти свойства аналогичны таковым у других элементов(img, iframe, embed, object, video) и задают, для случая с видео, размер области воспроизведения видео контента в пикселях CSS. Значения этих свойств доступны для изменения и не влияют на истинные внутренние размеры самого видео, т.к. определяют лишь размер области показа. Если установленные значения свойств width и height будут иметь не совпадающее соотношение сторон с оригинальным соотношением сторон видео, то, при воспроизведении, видео подстроится под размер заданной области воспроизведения, но с сохранением своих

начальных пропорций. Поэтому, в таких случаях могут появиться полосы по бокам или сверху и снизу от видео. Свойства width и height JS объекта video соответствуют одноименным HTML атрибутам width и height  тега <video>, которые они представляют. Свойства width и height JS видео объекта поддерживается всеми браузерами.

Пример использования свойств .width и .height

//получить значение ширины области воспроизведения в px
myVideo.width;
//установить ширину области воспроизведения в px
myVideo.width = 320;
//получить значение высоты области воспроизведения в px
myVideo.height;
//установить высоту области воспроизведения в px
myVideo.height = 240;

 

 

.videoWidth и .videoWidth

//unsigned long, только чтение, default = 0
video. videoWidth
video.videoHeight

Свойства video.videoWidth и video.videoHeight присутствуют только для видео элемента и доступны только для чтения. Эти свойства устанавливаются при инициализации или перезагрузке видео элемента на WEB странице и представляют действительные внутренние размеры видео из файла медиа ресурса, выраженные в пикселях CSS. Если видео файл отсутствует (video.readyState равно HAVE_NOTHING), то значения свойств устанавливаются как 0 ноль. При обновлении и установке этих свойств возникает событие resize  для видео элемента. Свойства videoWidth и videoHeight JS видео объекта поддерживается всеми браузерами.

Пример использования свойств .videoWidth и .videoHeight

//получить внутреннюю ширину видео в px
myVideo.videoWidth;
//получить внутреннюю высоту видео в px
myVideo. videoHeight;

 

 

.poster

//string, чтение, изменение
video.poster [ = "URL String" ]

Свойство video.poster JS объекта медиа элемента video присутствует только для видео элемента и возвращает или устанавливает строку, определяющую URL путь к файлу изображения, которое будет показано пока видео не доступно или еще не начиналось воспроизводиться. Свойство video.poster JS объекта видео элемента представляет и отражает значение одноименного HTML атрибута poster  тега <video>. Значение по умолчанию для свойства

video.poster JS видео объекта, при его инициализации, будет соответствовать первичному значению HTML атрибута poster тега video, или пустой строке, если HTML атрибут poster отсутствует в теге video. Если свойство video.poster не задано (равно пустой строке), то плеер браузера будет пытаться показать первый кадр видео. При задании свойства video.poster JS медиа элемента video, URL путь к файлу изображения можно указать как полный URL вида: http://www.example.com/…, так и как относительный к текущему домену web страницы. При получении же значения свойства video.poster JS видео объекта, всегда будет возвращаться полный URL
, как путь к файлу изображения, включая протокол (http:|https:) и домен. Свойство video.poster JS видео объекта поддерживается всеми браузерами.

Пример использования свойства .poster

//получить значение poster URL
myVideo.poster;
//установить значение poster URL
myVideo.poster = "http://www.example.com/...png";

 

Демонстрацию получения и изменения значений описанных здесь свойств видео элемента можно посмотреть и попробовать на странице: «Демонстрация JS управления HTML5 video и audio» , где представлены кнопки изменения этих свойств или в консоли браузера на примере видео представленного ниже.

Пример video:

HTML5 video не поддерживается вашим браузером.

Для работы с примером видео на этой странице при демонстрации JS использовано присвоение объекта видео в переменную JS с именем «myVideo

«.

HTML-элемент: видео: постер | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск

?

Элемент HTML: видео: постер

  • Глобальное использование
    94,57% + 0% «=» 94,57%
IE
  1. 6–8: не поддерживается
  2. 9–10: поддерживается
  3. 11: поддерживается
Edge
  1. 12 — 110: Поддерживается
  2. 00% — Supported»> 111: Поддерживается
Firefox
  1. 2 — 3,5: не поддерживается
  2. 3,6 — 110: поддержал
  3. 4114
  4. 4
  5. 4
  6. 4
  7. 4
  8. 4
  9. 4
  10. 4
  11. 4
  12. 4
  13. 4
  14. 4
  15. 4.
    Chrome
    1. 4 — 110: Поддерживается
    2. 111: Поддерживается
    3. 02% — Supported»> 112 — 114: Поддерживается
    Safari
    1. 3.1 — 16,2: поддержал
    2. 16.3: поддержание
      3. 9.4.1414141414141414141414.1414141414141414141414141414.14.0014
    Opera
    1. 10: не поддерживается
    2. 11,5 — 94: Поддерживается
    3. 95: поддержан
    Safari на IOS
    1. 3,2 -16.2: Поддержка
      1. 3.2 -16.2: Поддержка
      2. 3.2 -16.2: Поддержка
          3. . Opera Mini
          1. Все: поддержка Неизвестно
          Browser Android
          1. 47% — Support unknown»> 2.1 — 4.4.4: поддержка Неизвестно
          2. 111: Поддерживается
          Opera Mobile
          1. 12 — 12.1: 12.1: 12.1: 12.1: 12.1: 12.1: 12.1: 12.1: 12.1: 12.1: 12.1: 12.1: 12.1: 12.1: 12.1: 12.1: 12.1: 12.1: 12.1: 12.1: 12.1: 12.1: 12.1: 12.1: 12.1: 12.1: 12.1: 12.1: 12.1: 12.1: 12.1: 12.1: 12.1: 12.11:0014
          2. 73: Supported
          Chrome for Android
          1. 111: Supported
          Firefox for Android
          1. 110: Supported
          UC Browser for Android
          1. 13.4: Support unknown
          Samsung Internet
          1. 4 — 19.0: поддержка неизвестна
          2. 00% — Supported»> 20: поддерживается
          QQ Browser
          1. 13.1: поддержка неизвестна
          Baidu Browser

            : 1 поддержка неизвестна0014
          KaiOS Browser
          1. 2.5: Поддержка неизвестна
          2. 3: Поддержка неизвестна

          html — Блокирует ли атрибут html5 видео «плакат» загрузку видео?

          Задавать вопрос

          спросил

          Изменено 1 год, 10 месяцев назад

          Просмотрено 1к раз

          Я работаю над баннером Hero для веб-сайта, который должен отображать «плакат» до загрузки видео. Элемент видео настроен на «автовоспроизведение». И изображение-плакат, и видео обслуживаются из S3.

          После некоторого анализа загрузки страницы кажется, что есть случаи, когда загрузка видео ожидает загрузки изображения «плакат». В случаях, когда видео загружается перед изображением «плаката», есть ли способ просто запустить видео?

          Код:

          Кроме того, документ предварительно загружает изображение «плаката» (показан тонкий шаблон)

           ссылка rel="preload" as="image" href={'poster_url'}

          Я бы не хотел использовать JS для этой конкретной реализации. В целом реализация довольно производительна, но кажется, что данные имеют высокое стандартное отклонение — когда страница загружается быстро, она загружается быстро; когда он загружается медленно, он загружается довольно медленно.

          В документации не указано, будет ли когда-либо блокировать загрузку видео изображение «плаката».

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *