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

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

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

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

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

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

Video: Применение

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

Чтобы применить компонент Видео, добавьте к элементу <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="/video/caminandes-llamigos.mp4" controls playsinline hidden uk-video preload="none"></video>

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

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

Для воспроизведения видео есть два варианта автовоспроизведения. Просто добавьте параметр autoplay к атрибуту uk-video и примените одно из этих значений.

Значение	Описание
`inview`	Воспроизводить видео, когда оно входит в область просмотра, и снова приостанавливать его, когда оно покидает область просмотра.
`hover`	Воспроизводите видео, когда наводите на него курсор мыши, и снова приостанавливайте его, когда убираете курсор с видео.

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

<div class="uk-child-width-1-2@m" uk-grid>
    <div>
    	
    	<video src="/video/caminandes-llamigos.mp4" width="1920" height="1080" loop muted playsinline preload="metadata" 
    			uk-video="autoplay: inview"></video>

    </div>
    <div>
    	
    	<video src="/video/caminandes-llamigos.mp4" width="1920" height="1080" loop muted playsinline preload="metadata" 
    			uk-video="autoplay: hover" ></video>

    </div>
</div>

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

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

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

<iframe src="" width="" height="" title="" 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" title="YouTube" allowfullscreen loading="lazy" uk-responsive uk-video="automute: true"></iframe>

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

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

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

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

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

JavaScript

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

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

UIkit.video(element, options);