Время настройки: 2 минуты

Свои кнопки управления для видео/аудио

Позволяет создавать кастомные кнопки управления видео и аудио в Zero-блоках и добавляет новые возможности управления проигрыванием.

Кнопки управления видео в Zero-блоке

Запуск видео в Zero-блоке по ховеру

Модификация

Свои аудиофайлы в Zero-блоке

Модификация

Кнопки управления видео в Zero‑блоке

Инструкция по установке

Cкопируйте код ниже и вставьте его внутрь <head> в настройках сайта

Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг.

<script src="https://cdn.postnikovmd.com/tilda@1.4/mods.min.js"></script>

Создайте Zero-блок, добавьте в него элементы с видео в формате .mp4 и задайте им класс .uc-video

В одном блоке может быть несколько видео с таким классом. Если вы планируете добавить несколько таких блоков, задайте для видео внутри них разные названия классов, например, .uc-video1, .uc-video2 и т. д.

Модификация работает только с файлами .mp4. Их можно загрузить на Dropbox, Kinescope или любой другой хостинг (наведите на ссылки, чтобы увидеть нужный формат)
Добавьте кнопки управления для видео. Кнопке проигрывания поставьте ссылку #play, а кнопке паузы – #pause

Если вы хотите сделать одну кнопку, которая будет менять состояние в зависимости от проигрывания, задайте кнопкам одинаковое положение и вынесите кнопку проигрывания на передний план относительно кнопки паузы
Задайте в настройках модификации класс видео и параметры его поведения
Скопируйте код и вставьте его в блок T123 в конец страницы

Как это сделано?

<script>video.init(".uc-video", { pauseAll: true })</script>

Открыть пример

Настройки модификации

Класс видео:

Останавливать другие видео при запуске:

<!--video.js Кнопки управления видео. https://postnikovmd.com/mods/media-->
<script>video.init(".uc-video")</script>

Скопировать код

Особенности

Работает с файлами .mp4

Поддерживаются только видео формата .mp4, загруженные на хостинг
Можно переключать по ховеру

Подойдёт для анимации статичных изображений. Подробнее
Поддерживает low power mode

Скрывает системную кнопку Play, если у видео есть превью