Кастомные кнопки и элементы

В PRO можно создавать свои элементы в виде надписи или картинки (например, логотипы). Для этого нужно нажать кнопку Элементы / Добавить элемент и выбрать необходимый формат — надпись, картинку или код.

Для надписи нужно указать текст, для картинки — ссылку на изображение, либо ее содержание в виде data:URI, для SVG — иконку из коллекции, либо сам SVG код. Вы также можете загрузить SVG код динамически, если укажете для иконки JS переменную в виде var:xxx

Действие

Чтобы элемент выполнял какое-то действие, нужно указать Действие — ссылку, команду API, либо вызов Javascript. Например, эта команда откроет ссылку:

//playerjs.com

↓ запустит плеер

api:play

↓ перемотает на десять секунд назад

api:seek,-10

↓ запустит функцию с названием MyFunction, передав ей два аргумента

js:MyFunction,x,y

↓ в аргументах можно использовать плейсхолдеры {title}{time}{file}, которые будут заменяться на значения названия, времени воспроизведения и ссылки на файл

js:MyFunction,{file},{time}

↓ прямо вызвать действие JS, в котором есть круглые скобки (в данном случае возвращение вкладки браузера назад)

js:history.go(-1)

↓ инициировать JS событие

event:myEvent

Подписать на такое событие нужно контейнер плеера: document.getElementById("player").addEventListener("myEvent",onMyEvent);

Обратное действие

У элементов Надпись и SVG можно использовать обратное состояние. Текст обратной надписи или код обратной иконки нужно добавить через ///

Реакцию на обратное нажатие можно указать в настройках Действие

 

Также можно поменять обратное действие кнопки Пуск с Пауза на Стоп (актуально для трансляций и радио)

Если задать элементу идентификатор в настройках, то можно менять его состояние через JS API. В следующем примере кнопка с идентификатором heart переключится на обратное состояние после инициализации плеера. Это может пригодится, если кнопка управляет внешней функцией через JS.

function PlayerjsEvents(x){
   if(x=="init"){
      player.api("button","toogle","id:heart");
   }
}

Как совместить иконку и текст

Нужно создать элемент типа SVG и указать ее код, либо выбрать нужную иконку в библиотеке. Затем нужно включить подсказку, указать для нее текст, а также включить опцию Показывать всегда. С помощью отступов можно растянуть фон элемента на необходимую длину.

---