Видео

Добавляйте видео на страницы своего сайта и включайте, когда и как хотите.

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

Рассмотрим вставку видео с применением компонентов Слайдшоу, Лайтбокс и Обложка, которые поддерживают обе указанные функции.

Использование компонента Видео

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

<video uk-video></video>

  • <button class="uk-button uk-button-default uk-margin" type="button" uk-toggle="target: +">Развернуть видео</button>

<video controls playsinline hidden uk-video>
    <source src="https://quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
    <source src="https://quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg">
</video>

Автоматическое воспроизведение в области просмотра

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

<video uk-video="autoplay: inview"></div>

  • <video loop muted playsinline uk-video="autoplay: inview">
    <source src="https://quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
    <source src="https://quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg">
</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-default uk-margin-bottom" type="button" uk-toggle="target: +">Открыть видео</button>

<iframe src="https://www.youtube-nocookie.com/embed/YE7VzlLtp-4?autoplay=0&amp;showinfo=0&amp;rel=0&amp;modestbranding=1&amp;playsinline=1" width="560" height="315" frameborder="0" allowfullscreen uk-responsive uk-video="automute: true"></iframe>

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

В таблице ниже перечислены доступные настройки для атрибута uk-video. Подробнее об атрибутах

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

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

JavaScript

Подробнее о компонентах JavaScript.

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

UIkit.video(element, options);