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

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

Кому подходит эта статья

• Дизайнерам — нужно настроить внешний вид плеера под бренд
• Контент-менеджерам — требуется создать разные шаблоны для разных типов контента
• Разработчикам — нужно настроить поведение плеера программно

Создание нового шаблона плеера

Из настроек видео

• В Каталоге откройте настройки видео, дважды кликнув по его названию.
• Перейдите на вкладку «Основные», в разделе «Плеер» нажмите «Настроить» или выберите «Создать новый плеер».
• Задайте название шаблона, измените хотя бы одну настройку и нажмите «Сохранить».
• Плеер применится к этому видео, а также станет доступен в настройках других роликов и в «Менеджере шаблонов» в настройках рабочей зоны.

Через менеджер шаблонов

• Перейдите в «Менеджер шаблонов» через меню «Настройки» → «Плееры».
• Нажмите «Новый плеер», задайте название и откройте его для редактирования

Редактирование шаблонов

Из настроек видео

• В каталоге дважды кликните по названию видео.
• Перейдите на вкладку «Основные» → раздел «Плеер». Выберите нужный шаблон и нажмите «Настроить».
• Внесите изменения и сохраните их.

Через менеджер шаблонов

• В разделе «Настройки» → «Плееры» найдите нужный шаблон.
• Кликните по названию шаблона для редактирования.

Настройки поведения и внешнего вида плеера

Плеер Kinescope можно адаптировать под любые задачи и проекты благодаря широкой функциональности настроек. Они разделены на две основные категории:

1. Основные: базовые параметры, включая настройки перед запуском и в процессе воспроизведения.
2. Расширенные: дополнительные настройки поведения плеера, трансляции на устройства, кастомизации элементов управления и других функций.

Изменения в настройках отображаются в зоне предпросмотра в реальном времени. Если выбрать режим отображения плеера «Монитор» или «Телефон», то можно увидеть, как будет смотреться готовый шаблон. Очень важно не забывать сохранять настройки, иначе они не будут применены.

Основные настройки поведения и внешнего вида плеера

Основные настройки

Интерфейс основных настроек плеера:

Название шаблона плеера

Задайте уникальное название для шаблона, чтобы его было легче найти, использовать для других видео или редактировать через менеджер шаблонов в рабочей зоне.

Цвет плеера

Фирменный цвет бренда может повышать конверсию в плеере. Цвет изменяется у большой кнопки Play/Pause, полосы перемотки и панели управления плеера. Оттенок можно выбрать через палитру или ввести код RGB илиHEX.

Скругление углов

Интегрируйте плеер в общий стиль вашего сайта: в настройках шаблона можно скруглить углы окна плеера в диапазоне от 0 до 24px.

Логотип

Добавьте свой логотип, который будет отображаться в правом нижнем углу плеера. Рекомендуем изображение размером 150x150px в формате PNG. Вы также можете добавить подсказку, которая появится при наведении курсора на логотип, или ссылку, которая откроется при клике.

Пример плеера с кликабельным логотипом:

Автозапуск

Позволяет автоматически воспроизводить видео при загрузке страницы.

Пример плеера с автозапуском:

Фоновое видео

Настройки плеера для фонового воспроизведения:

• Элементы управления плеера становятся невидимыми;
• Звук и автопауза отключаются;
• Видео воспроизводится автоматически и повторяется.

Режим 360°

Режим для просмотра панорамного, сферического видео.

Убрать черные полосы

Настройка позволяет растянуть видео до размеров границ плеера, чтобы убрать чёрные полосы по краям. Это особенно полезно для нестандартных разрешений видео.

Громкость звука по умолчанию

Настройте уровень громкости при запуске видео от 0% до 100%, чтобы уровень звука сразу был комфортным для зрителей.

Качество видео по умолчанию

Выберите качество видеопотока, которое будет использоваться при запуске видео. Доступные варианты:

• Авто (по умолчанию): плеер сам определяет качество на основе скорости соединения.
• Заданное качество: например, 720p или 1080p.

Поведение по окончании видео

Выберите, что будет происходить после окончания видео. Доступны четыре сценария:

1. Кнопка «Повторить»: позволяет зрителю перезапустить видео по клику.
2. Возврат к постеру: видео возвращается к исходному экрану с постером.
3. Зацикливание: автоматическое повторное воспроизведение видео.
4. Призыв к действию (Call to action, CTA): в конце видео или плейлиста можно добавить кнопку с ссылкой. Укажите заголовок, описание и направьте зрителя на следующий шаг: сайт, курс, регистрацию или покупку. Призыв к действию будет выглядеть так:

До запуска

Настройки отображения элементов плеера до начала воспроизведения:

Заголовок и подзаголовок

Заголовок и подзаголовок видео будут отображаться в левом верхнем углу плеера до запуска, если они указаны в настройках видео на вкладке «Основные». По умолчанию эти элементы скрыты.

Пример отображения заголовка и подзаголовка в плеере:

Кнопка проигрывания

По умолчанию кнопка Play/Pause отображается в центре плеера до начала воспроизведения, но с помощью этой настройки её можно скрыть.

Пример плеера с кнопкой проигрывания:

Панель управления

По умолчанию она скрыта, что делает дизайн плеера минималистичным. Если в расширенных настройках плеера включить предварительную загрузку, панель управления плеера будет отображаться до запуска ролика.

Пример отображения панели управления до запуска:

При проигрывании

Настройки отображения элементов плеера во время воспроизведения:

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

Полоса перемотки

Эта опция позволяет скрыть полосу перемотки при проигрывании видео. Это может быть полезно для промо-видео, где важно удерживать внимание пользователя от начала до конца. По умолчанию полоса перемотки включена.

Пример плеера без полосы перемотки:

Панель управления

Вы можете полностью скрыть панель управления во время воспроизведения, оставив только полосу перемотки, если она не отключена. По умолчанию панель управления отображается.

Пример плеера без элементов управления (только видео):

Расширенные настройки

Интерфейс расширенных настроек плеера:

Запуск видео с субтитрами

Если для видео загружены субтитры, то при запуске они будут отображаться автоматически. Если у видео несколько дорожек субтитров, порядок их выбора определяется:

• Языком, установленным в плеере;
• Языком браузера зрителя;
• Порядком субтитров в списке.

По умолчанию субтитры отключены.

Автопауза

Если на странице размещено несколько плееров, это может повлиять на производительность. Автопауза решает эту проблему: она автоматически ставит плеер на паузу, когда начинается воспроизведение в другом плеере на той же странице.

Трансляция на устройства

Опция позволяет управлять возможностью трансляции видеопотока на внешние мониторы по протоколам Chromecast и Airplay, а также отображением соответствующих кнопок в плеере. По умолчанию поддержка трансляций включена.

Меню настройки

Меню настройки (значок шестерёнки), через которое зритель может изменять скорость, качество видео и другие настройки. Позволяет добавлять или убирать элементы из меню:

• Качество «Только звук»: предназначено для случаев с медленным интернет-соединением. Включает только аудиодорожку без изображения.
• Скорость воспроизведения: дублируется в панели управления, что делает её доступной из нескольких мест.

Элементы панели управления

Этот набор настроек позволяет избирательно скрывать или показывать отдельные элементы панели управления плеера. По умолчанию все они показываются.

Пример настроек элементов панели управления:

Водяные знаки

Статический водяной знак — это текст или логотип, который постоянно отображается на экране во время воспроизведения видео для обозначения авторства или указания на права. Подходит для публичных видео, рекламных роликов и контента, распространяемого в широком доступе.

Дополнительные настройки

Если предзагрузка видео включена, общее время загрузки страницы может увеличиться. По умолчанию опция отключена.

Настройки предзагрузки и дополнительных функций:

В плеере Kinescope по умолчанию поддерживаются быстрые клавиши, полный список которых доступен в меню по правому клику на плеере.

Пример меню с быстрыми клавишами:

Плеер Kinescope может запоминать настройки плеера для каждого зрителя (скорость воспроизведения, качество видео и другие предпочтения).

Настройки запоминания предпочтений зрителя:

В настройках доступна опция «Управление кликами мыши/тапами». Если она включена, управлять воспроизведением можно не только через элементы интерфейса, но и нажатиями прямо на видео. Если опция отключена, управлять видео возможно только через панель управления.

При нажатии правой кнопкой мыши на видео в контекстном меню отображается пункт «Подробнее о Kinescope», который перенаправляет на официальный сайт платформы.

Пример настроек контекстного меню и псевдо-полноэкранного режима:

Псевдополноэкранный режим для iOS сохраняет оригинальные элементы управления плеера Kinescope при переходе в полноэкранный режим. Рекомендуем включить опцию при использовании динамических водяных знаков для защиты контента. Подробнее здесь.

SEO-оптимизация добавляет к коду плеера метаданные (название, описание, постер и другие), которые индексируются поисковиками. Используется структура разметки schema.org для повышения позиций публичных видео в выдаче поисковиков.

Включите сбор данных, чтобы плеер мог наполнять раздел аналитики данными о поведении пользователей.

Настройки сбора аналитики и SEO-оптимизации:

Что дальше?

После настройки кастомизации плеера рекомендуем:

1. Встраивание — узнайте, как встроить кастомизированный плеер на ваш сайт
2. IFrame Player API — программное управление плеером через JavaScript
3. Аналитика — отслеживайте эффективность кастомизированных плееров

Остались вопросы? Напишите в чат поддержки — специалисты помогут!