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

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

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

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

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

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


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

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

<video uk-video></video>
  • <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></video>

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

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

<video uk-video="autoplay: inview"></video>
  • <video src="/demo/video/caminandes_llamigos.mp4" loop muted playsinline uk-video="autoplay: inview"></video>

Автоматизировать YouTube или Vimeo

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

<iframe src="" width="" height="" frameborder="0" 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&showinfo=0&rel=0&modestbranding=1&playsinline=1" width="1920" height="1080" frameborder="0" allowfullscreen uk-responsive uk-video="automute: true"></iframe>

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

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

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

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


JavaScript

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

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

UIkit.video(element, options);
Документация
Компоненты