Компонент Видео Video

Начинайте воспроизводить видео, когда оно входит в окно просмотра, и приостановите его, когда оно покидает видимую область.

Компонент Видео предлагает две расширенные функции для видео.

Во-первых, он позволяет приостановить видео, когда оно скрыто с помощью CSS, и возобновить воспроизведение, как только оно снова станет видимым. Кроме того, видео может приостанавливаться, когда оно находится вне области просмотра, и начинать воспроизведение при появлении.

Во-вторых, он позволяет отключить звук на YouTube и Vimeo, что часто необходимо, если они используются в качестве фона раздела.

Компоненты Слайд-шоу, Лайтбокс и Cover наследуют и используют обе функции.

Применение

Руководство по использованию

Чтобы применить компонент Видео, добавьте к элементу <video> атрибут uk-video. Видео будет приостанавливаться всякий раз, когда оно скрыто с помощью CSS, и возобновится, как только оно снова станет видимым.

<video uk-video></video>

При встраивании видеоролика на веб-странице элемент HTML <video> поддерживает глобальные атрибуты. Неоторые из них:

controls: Отображает элементы управления.
loop: Зацикливает видео, т.е. по окончанию проигрывания автоматически начнёт воспроизведение с начала.
muted: Убрать звук. Отключает аудиодорожку.
preload: Рекомендация по предварительной загрузке, где установленное значение предполагает:
none не загружать видео предварительно;
metadata предварительно загрузить метаданные видео (рекомендовано);
auto можно загружать, даже если не используется;
'' аналогично auto.
poster: URL-адрес картинки-заглушки, которая отображается до воспроизведения загруженного видео

<button class="uk-button uk-button-primary uk-margin" type="button" uk-toggle="target: +">Переключить видео HTML5</button>

<video src="/demo/video/caminandes_llamigos.mp4" controls playsinline hidden uk-video preload="none"></video>

Автовоспроизведение

Автовоспроизведение в поле зрения

Чтобы воспроизводить видео, когда оно входит в область просмотра, и снова приостанавливать его, когда оно покидает область просмотра, добавьте атрибут uk-video="autoplay: inview" к элементу <video>.

<video src="" width="" height="" uk-video="autoplay: inview"></video>

<video src="/demo/video/caminandes_llamigos.mp4" 
       width="1920" height="1080" loop muted playsinline 
       uk-video="autoplay: inview" preload="metadata"></video>

Отключение звука

Автоматическое отключение звука YouTube или Vimeo

Чтобы отключить звук видео YouTube или Vimeo по умолчанию, добавьте атрибут uk-video="automute: true" к элементу <iframe>.

<iframe src="" width="" height="" loading="lazy" uk-video="automute: true"></iframe>

<button class="uk-button uk-button-primary uk-margin-bottom" type="button" uk-toggle="target: +">Переключить YouTube Video</button>

<iframe src="https://www.youtube-nocookie.com/embed/SkVqJ1SGeL0?autoplay=0&amp;showinfo=0&amp;rel=0&amp;modestbranding=1&amp;playsinline=1" 
        width="1920" height="1080" allowfullscreen uk-responsive uk-video="automute: true" loading="lazy"></iframe>

Параметры для атрибута

При использовании компонента Video к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

Опции компонента

Опция	Значение	По умолчанию	Описание
`autoplay`	Boolean, String	`true`	Видео автоматически воспроизводится / приостанавливается, поскольку оно видно / скрыто на странице. Значение `inview` будет задерживать загрузку видео и воспроизводить / приостанавливать видео, когда оно входит / выходит из области просмотра.
`automute`	Boolean	`false`	Автоматически отключать видео YouTube или Vimeo.

autoplay является Primary опцией. Если autoplay это единственный параметр в значении атрибута, то её ключ можно не использовать.

JavaScript

Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.

Инициализация

UIkit.video(element, options);