Справка
Возникли трудности?
Задайте вопрос поддержке.

Кастомизация плеера

Кастомизации реализуется с помощью подключения внешнего файла стилей CSS к коду плеера, таким образом можно изменить цветовую гамму и другие параметры отображения элементов плеера.

Подключение вашего файла со стилями к плееру

Подключение производится командой css к коду плеера, например, так:

lamp Прямая ссылка к плееру без кастомизации и после подключения файла со стилями:

https://facecast.net/w/qn0afy

https://facecast.net/w/qn0afy?css=https://facecast.net/v/clients/css/sample_new.css

Указывается полный путь к файлу с префиксом https:// , хостинг должен поддерживать ssl соединения.

Если у вас нет своего хостинга для файла со стилями, мы можем его вам предоставить.

Параметры добавляются к URL плеера по следующим правилам: после адреса плеера, перед первым параметром ставится символ «?», все последующие параметры отделяются символом «&».

Пример: https://facecast.net/w/qn0afy?css=https://facecast.net/v/clients/css/sample_new.css&noanimation

Пример кода встройки стилей во фрейм

<iframe src="https://facecast.net/w/qn0afy?css= https://facecast.net/v/clients/css/sample_new.css" width="976" height="549" style="border:none" allow="autoplay; fullscreen" allowfullscreen></iframe>

Пример кода встройки стилей во фрейм с JS

<script src="https://facecast.net/w/js/iframe.js"></script>
<iframe id="qn0afy" onload="fc_load_iframe(this, 'css= https://facecast.net/v/clients/css/sample_new.css)" width="976" height="549" style="border:none" allow="autoplay; fullscreen" allowfullscreen></iframe>

Подробнее о встраивании плеера на сайт читайте здесь.

Пример файла со стилями

Описание некоторых селекторов можно узнать из файла с наиболее востребованными элементами кастомизации среди наших клиентов: https://facecast.net/v/clients/css/sample_new.css

Примеры использования кастомизированного плеера

Допустим, в трансляции https://facecast.net/w/qn0afy необходимо перекрасить кнопку «Play».

Создаем файл следующего содержания:

/* Цвет кнопки Play */
.player-poster[data-poster] .play-wrapper[data-poster] svg path {
fill: #ff050570;
}
• player-poster[data-poster] .play-wrapper[data-poster] svg path – путь к расположению элемента.
fill: #ff050570 – атрибут раскраски элемента

https://facecast.net/v/clients/css/sample1.css — файл в который мы добавили эти данные.

Результат:

https://facecast.net/w/qn0afy?css=https://facecast.net/v/clients/css/sample1.css

Рассмотрим ситуацию, когда нам нужно изменить цвет полосы воспроизведения и регулятор громкости.
Создаем файл следующего содержания:

/* Цвет полосы громкости */
.media-control[data-media-control] .media-control-layer[data-controls] .media-control-volume-bar[data-volume] .media-control-volume-bar-on[data-volume] {
background: #ff050570;
}

/* Точка громкости и текущей позиции воспроизведения*/
.media-control-layer[data-controls] .media-control-center-panel[data-media-control] .fragment-element__container .fragment-element__seek-scrubber,
.media-control[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-scrubber[data-seekbar],
.media-control[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-scrubber[data-seekbar] .bar-scrubber-icon[data-seekbar],
.live-dvr-seekbar > .live-dvr-seekbar-scrubber,
.media-control[data-media-control] .media-control-layer[data-controls] 
.media-control-volume-bar[data-volume] .media-control-volume-bar-scrubber[data-volume]::after {
background: #ff050570;
}

/* Загруженный буфер */
.media-control[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar],
.media-control-layer[data-controls] .media-control-center-panel[data-media-control] .fragment-element__container .fragment-element__dot .fragment-element__progress {
background: #ff050570;
}

https://facecast.net/v/clients/css/sample2.css — наш новый файл со стилями.

Результат:

https://facecast.net/w/qn0afy?css=https://facecast.net/v/clients/css/sample2.css

Кастомизация плеера не ограничивается приведенным примером. Требуется наличие минимальных знаний языка таблицы стилей.

Если вам нужна помощь в создании своего стиля плеера, обращайтесь к нам в Telegram, звоните или оставьте заявку на сайте.

Вы хотите
зарегистрироваться как:
Сбросить пароль
Вход
Регистрация
Оставить заявку
Мы разработали Evacoder для быстрой и удобной организации трансляций без необходимости привлечения специалистов.
Обратный звонок
Наш менеджер перезвонит вам в ближайшее время.