Кастомные элементы


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

Для надписи нужно добавить текст, для картинки ссылку на файл, либо само содержание в виде data:URI, для 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 и указать ее код, либо выбрать нужную иконку в библиотеке. Затем нужно включить подсказку, указать для нее текст, а также включить опцию Показывать всегда. С помощью отступов можно растянуть фон элемента на необходимую длину.


16.14.22022 © PlayerJS

Регистрация

Создать аккаунт
Регистрируясь, вы принимаете Пользовательское соглашение
Войдите, если уже есть аккаунт

Восстановить пароль

Восстановить
Если вы забыли свой email, напишите нам