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


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



2018 - 2021 © PlayerJS

Логин

Восстановить пароль
Создать аккаунт
Войти

Регистрация

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

Enterprise

Ваше имя
Сайт
Email
Телефон
Комментарий
Отправить запрос

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

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