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

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

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

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

Модификация

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

Модификация

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

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

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

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

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

Добавьте в Zero-блок кнопки управления аудио: кнопке проигрывания поставьте ссылку #audio-play, а кнопке паузы – #audio-pause

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

Если вы планируете добавить несколько аудио на страницу, задайте для каждого из них свои ссылки, например, #audio1-play и #audio1-pause.
Задайте в настройках модификации класс для аудио (например, .uc-audio или любой другой)

Он необходим для привязки кнопок к конкретному файлу. Если вы планируете добавить несколько аудио на страницу, задайте для каждого из них свой уникальный класс, например, .uc-audio1, .uc-audio2 и т.д.
Задайте в настройках модификации ссылку на аудиофайл

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

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

<script>audio.init(".uc-audio1", { source: "https://static.postnikovmd.com/mods/audio-1.mp3", play: "#audio1-play", pause: "#audio1-pause" })</script>
<script>audio.init(".uc-audio2", { source: "https://static.postnikovmd.com/mods/audio-2.mp3", play: "#audio2-play", pause: "#audio2-pause" })</script>
<script>audio.init(".uc-audio3", { source: "https://static.postnikovmd.com/mods/audio-3.mp3", play: "#audio3-play", pause: "#audio3-pause" })</script>

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

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

Класс аудио:

Ссылка на аудиофайл:

Кнопка проигрывания:

Кнопка паузы:

<!--audio.js Свои аудиофайлы в Zero-блоке. https://postnikovmd.com/mods/media/audio-->
<script>audio.init(".uc-audio")</script>

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

Особенности

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

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

Подойдёт для создания музыкальных плееров и голосовых сообщений
Создан специально для Тильды

Модификация учитывает особенности Тильды и легко встраивается в неё