LinkedIn
Behance
Максим Постников
© 2025 Максим Постников. Все права защищены.
Ru
En

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

Позволяет создавать кастомные кнопки управления видео и аудио в 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, если у видео есть превью

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

Элементы
Параметры
Чат для дизайнеров
Вместе всё получится
3 000+ человек
Присоединяйтесь ко мне в Telegram-канале!
Чтобы узнавать о новых модификациях и получать оперативную тех. поддержку
t.me/postnikovmds
Можете меня поблагодарить
Если у вас есть желание поблагодарить автора за работу, можете отправить любую сумму на развитие проекта
Присоединяйтесь ко мне в Telegram-канале!
Чтобы узнавать о новых модификациях и получать оперативную тех. поддержку
t.me/postnikovmds
 
https://dl.dropboxusercontent.com/s/XXXXXXXXXXXXXXX/video.mp4?dl=0
https://kinescope.io/XXXXXXXXXXXXXXXXXXXXXX/1080p
https://example.com/video.mp4
Столкнулись с ошибкой?
Расскажите подробнее о проблеме, при которой модификация не работает или работает неправильно
Хотите получить ответ по проблеме? Напишите напрямую на почту hello@postnikovmd.com или в Telegram
Хотите получить ответ по проблеме? Напишите напрямую на на почту или в Telegram
Расскажите подробнее о проблеме, при которой модификация работает неправильно
Сообщение отправлено
Спасибо за обращение! Мы провалидируем ошибку и исправим её в ближайшее время
Нравятся модификации?
Поделитесь впечатлениями от работы с библиотекой — обратная связь поможет нам стать лучше
Поделитесь впечатлениями о сервисе — обратная связь поможет нам стать лучше
Сообщение отправлено
Спасибо, что делитесь с нами! Это помогает нам развиваться и улучшать сервис
Максим Постников | Дизайн...
Отключение автоскейла для для отдельных браузеров/устройств
27
20 фев в 12:00
120