Модификация находится в бета-версии. Если нашли ошибку, сообщите о ней здесь
LinkedIn
Behance
Максим Постников
© 2024 Максим Постников. Все права защищены.
Ru
En

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

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

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

Инструкция по установке
  • 1
    Cкопируйте код ниже и вставьте его внутрь <head> в настройках сайта
    Этот код устанавливается только один раз. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг.
<script src="https://cdn.jsdelivr.net/gh/postnikovmd/tilda@1.1/media.min.js"></script>
  • 1
  • 2
    Добавьте в Zero-блок кнопки управления аудио: кнопке проигрывания поставьте ссылку #audio-play, а кнопке паузы – #audio-pause
    Если вы хотите сделать единую кнопку, которая будет менять состояние в зависимости от проигрывания, задайте обеим кнопкам одинаковое положение и вынесите кнопку проигрывания на передний план относительно кнопки паузы.

    Если вы планируете добавить несколько аудио на страницу, задайте для каждого из них свои ссылки, например, #audio1-play и #audio1-pause
  • 3
    Задайте в настройках модификации класс для аудио (например, .uc-audio или любой другой). Он необходим для привязки кнопок к конкретному файлу.
    Если вы планируете добавить несколько аудио на страницу, задайте для каждого из них свой уникальный класс, например, .uc-audio1, .uc-audio2 и т.д.
  • 4
    Задайте в настройках модификации ссылку на аудиофайл
  • 5
    Скопируйте код и вставьте его в блок T123 в конец страницы
Как это сделано?
<script src="https://cdn.jsdelivr.net/gh/postnikovmd/tilda@1.1/media.min.js"></script>
<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>
Видео скоро появится…
Настройки модификации
Настройки модификации
Класс аудио:
Ссылка на аудиофайл:
Кнопка проигрывания:
Кнопка паузы:
<script>audio.init(".uc-audio")</script>
Скопировать код
Особенности
  • Работает с файлами .mp3
    Поддерживаются только аудио формата .mp3, загруженные на хостинг
  • Управляется кнопками
    Подойдёт для создания музыкальных плееров и голосовых сообщений
  • Создан специально для Тильды
    Модификация учитывает особенности Тильды и легко встраивается в неё

Документация

Элементы
Параметры
Чат для дизайнеров
Вместе всё получится
3 000+ человек
Присоединяйтесь ко мне в Telegram-канале!
Чтобы узнавать о новых модификациях и получать оперативную тех. поддержку
t.me/postnikovmds
Можете меня поблагодарить
Если у вас есть желание поблагодарить автора за работу, можете отправить любую сумму на развитие проекта
Присоединяйтесь ко мне в Telegram-канале!
Чтобы узнавать о новых модификациях и получать оперативную тех. поддержку
t.me/postnikovmds
© 2024 Максим Постников. Все права защищены.
Обо мне
Проекты
Блог
Связаться
Модификации
Максим Постников
 
Столкнулись с ошибкой?
Расскажите подробнее о проблеме, при которой модификация не работает или работает неправильно
Хотите получить ответ по проблеме? Напишите напрямую на почту hello@postnikovmd.com или в Telegram
Хотите получить ответ по проблеме? Напишите напрямую на на почту или в Telegram
Расскажите подробнее о проблеме, при которой модификация работает неправильно
Сообщение отправлено
Спасибо за обращение! Мы провалидируем ошибку и исправим её в ближайшее время
Нравятся модификации?
Поделитесь впечатлениями от работы с библиотекой — обратная связь поможет нам стать лучше
Поделитесь впечатлениями о сервисе — обратная связь поможет нам стать лучше
Сообщение отправлено
Спасибо, что делитесь с нами! Это помогает нам развиваться и улучшать сервис