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

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

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

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

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

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

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

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

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

<video src="" width="" height="" playsinline loop muted 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>

Чтобы перезапустить видео с самого начала после его приостановки, добавьте опцию restart к атрибуту uk-video.

Чтобы включить автовоспроизведение при наведении курсора на элемент, отличный от самого видео, просто добавьте параметр hover-target: SELECTOR к атрибуту uk-video.

Lazy Loading

Чтобы видео загружалось в режиме отложенной загрузки, добавьте к видео атрибут preload="none". Компонент Video удаляет этот атрибут, как только видео попадает в область просмотра, обеспечивая отложенную загрузку.

<video src="" width="" height="" playsinline loop muted preload="none" uk-video="autoplay: hover"></video>

<video src="/video/caminandes-llamigos.mp4" width="1920" height="1080" playsinline loop muted preload="none" uk-video></video>

Загрузка по клику

Чтобы загрузить видео с изображением постера не перед нажатием кнопки воспроизведения, добавьте к видео атрибуты uk-video="autoplay: false" и preload="none".

<video src="" width="" height="" poster="" controls preload="none" uk-video="autoplay: false"></video>

<video src="/video/caminandes-llamigos.mp4" poster="images/dark.webp" width="1920" height="1080" controls preload="none" uk-video="autoplay: false"></video>

В качестве альтернативы можно отобразить изображение-заполнитель, которое будет заменено элементом видео. Просто разместите скрытое видео и связанное изображение рядом в элементе-контейнере и добавьте атрибут uk-toggle из компонента Toggle к ссылке на изображение. Затем укажите как скрытое видео, так и связанное изображение, чтобы включить или отключить их видимость.

<div class="uk-inline">
    <video src="" width="" height="" controls preload="none" hidden uk-video></video>
    <a href uk-toggle="target: ! > *">
        <img src="" width="" height="" alt="">
    </a>
</div>

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

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

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

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

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

JavaScript

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

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

UIkit.video(element, options);