Компонент Видео 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&showinfo=0&rel=0&modestbranding=1&playsinline=1" width="1920" height="1080" allowfullscreen uk-responsive uk-video="automute: true" loading="lazy"></iframe>
JavaScript
Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.
Инициализация
UIkit.video(element, options);