Параметры


Подключение Веб-плеера

Пример
<script src="https://cdn.jsdelivr.net/npm/venom-player@latest"></script> <script> VenomPlayer.make({ publicPath: 'https://cdn.jsdelivr.net/npm/venom-player@' + VenomPlayer.version + '/dist/', source: { file: { 360: 'https://raw.githubusercontent.com/mnaseersj/BigBuckBunny/master/BigBuckBunny_640x360.mp4' } } }) </script>

publicPath String задает базовый путь для загрузки динамических модулей по мере их необходимости. Например, если плеер подключен из https://cdn.jsdelivr.net/npm/venom-player@latest, то нужно указать "https://cdn.jsdelivr.net/npm/venom-player@latest/dist/"

container Element - ссылка на DOM элемент, в который следует встроить плеер. Если не указан, будет использовано document.body. Перед встраиванием все содержимое контейнера очищается.

container: document.getElementById('player-container')


Медиа контент

source Object комплексный параметр, основное назначение которого – указание пути к источнику видео. Должен содержать хотя бы одну из секций:

  • source.dash String путь к dash манифесту
  • source.hls String путь к hls манифесту
  • source.hlsList Object<Number,String> объект, в котором ключом выступает качество видео, а значением - путь к hls манифесту для этого качества.
  • source.file Object<Number,String> так же, как и hlsList, но для нестриминговых типов видео, а в виде одного файла. Это может быть mp4, webm и т.д..

Эти опции должны представлять альтернативные варианты одного и того же видеофайла. Если указан dash, но он не поддерживается браузером пользователя, будет использован hls/hlsList. Если браузер не поддерживает hls (нативно или с помощью библиотеки hls.js), воспроизводиться будет file.

Для устройств, поддерживающих hls только нативно (в основном это мобильные iOS устройства и некоторые модели Smart TV) лучше использовать hlsList, вместо hls. Это позволит пользователям самостоятельно выбрать наиболее удобное качество видео.

Подключение медиа контента
opts = { // ... source: { // если используется Kaltura, то мастер манифест // hls: 'https://video.example/id/master.m3u8', // деление по качествам с помощью специального роута `/tracks` hlsList: { 480: 'https://video.example/id/tracks/v2-a/master.m3u8', 720: 'https://video.example/id/tracks/v1-a/master.m3u8' } } }

dash Object настройки dashjs, подробнее на dashjs.org.

live Boolean для трансляций следует указать live: true.

source.audio позволяет переименовывать звуковые дорожки и изменять их порядок в меню. Количество значений параметра должно совпадать с количеством звуковых дорожек в манифесте. Иначе параметр будет проигнорирован.

source.cc субтитры.

Звуковые дорожки и субтитры
opts = { // ... source: { // ... audio: { names: ["Оригинал", "Дубляж"], order: [1, 0] // в меню будет "Дубляж", а затем "Оригинал" }, cc: { { name: "rus", url: "https://example.cc/rus.vtt" }, { name: "eng", url: "https://example.cc/eng.vtt" } } } }


Управление

Пример
ui: { lock: true, // показывать кнопку блокировки на мобильных, по умолчанию false // share: false, // спрятать кнопку поделиться, по умолчанию true // share: ['facebook', 'vkontakte', 'odnoklassniki', 'copy'], // активные социальные сети // timeline: false, // по умолчанию true // prevNext: false, // по умолчанию true. Спрятать кнопки "Следующая" и "Предыдущая" // fullscreen: 'external'|false, по умолчанию true }

aspectRatio String соотношение сторон веб-плеера. По умолчанию "16:9". Значение "fill" заполнит все доступное пространство. С помощью значений "ширина:высота" можно установить необходимое соотношение сторон (4:3, 10:9, 1:1 и т.д.).

poster String URL изображения, которое будет отображаться до начала проигрывания и во время загрузки видео. Подробнее на developer.mozilla.org.

defaultPoster String изображение, которое будет использовано как постер, если изображение из poster по каким-либо причинам недоступно.

restrictQuality Function вызывается перед каждым изменением качества и позволяет заблокировать переключение качества видео. Вместо переключения будет выведена строка текста, которую вернула функция (желательно указать причину). Если результат в логическом контексте ложен - изменение произойдёт как обычно.

restrictQuality: function(quality) {
  if (quality > 9000) {
    return "Your video card are not prepared!"
  }
}

blocked Boolean если установлено true, вместо плеера будет выведено сообщение о заблокированном видео. Текст сообщения можно изменить с помощью text.blocked.

volume Number звук в пределах от 0 до 1. По умолчанию 1.

soundBlock String спрятать перечисленные звуковые дорожки.

soundBlock: 'spanish,одноголосый' // можно указать лишь часть названия

oneSound String позволяет спрятать все звуковые дорожки, кроме указанной.

oneSound: 'original' // регистронезависимо, можно указать лишь часть названия

rewind Number[] время перемотки в секундах. Первое значение используется при перемотке стрелками клавиатуры и тапом на мобильном (можно несколько раз подряд), второе - с зажатой кнопкой shift на компьютерах и нажатием кнопок перемотки в плеере на телевизорах. По умолчанию [5, 20].

speed Number[] список значений с выбором скорости воспроизведения.

speed: [1, 1.1, 1.25, 1.5]

format Object форматирование опций меню.

format: {
    speed: function (rate) {
        return 'x' + rate;
    },
    quality: function (q) {
        if (q > 2000) return q+'K';
        if (q > 1079) return 'fHD '+q;
        if (q > 719) return 'HD '+q;
        return q;
    }
}

timeSearchParamName String название get параметра, с которого будет взято значение time. По умолчанию 't'.

reportUrl String url, на который будет отправляться форма обратной связи методом POST. Содержит поля: email, message и data.


Поведение

autoLandscape Boolean если установить true, то на мобильных при входе в полноэкранный режим будет использована альбомная ориентация экрана.

pip Boolean | Number true - добавить кнопку "Picture-in-picture", по умолчанию false. Включение режима просмотра видео в плавающем окне.

liveBuffer соответствует настройке maxBufferLength в библиотеке hls.js.

quality Number качество по умолчанию.

quality: 720

restrictSpeed Function позволяет ограничить изменение скорости воспроизведения, в зависимости от качества.

restrictSpeed: function(rate, quality) {
  if (rate > 1 && quality > 480) {
    return 'Ускорение доступно только для низкого качества видео'
  }
}

time Number начать воспроизведение с указанного времени в секундах.

trackProgress Number интервал в секундах, по которому будет срабатывать событие viewProgress. По умолчанию 60.

doNotSaveProgress Boolean при значении true прогресс просмотра не будет сохраняться. По умолчанию false.

replay повторное воспроизведения видеофайла после его завершения.

download String позволяет добавить ссылку на скачивание контента.

reportUrl String url, на который будет отправляться форма обратной связи методом POST. Содержит поля: email, message и data.


Стилизация

theme String активная тема веб-плеера. В данный момент доступны "modern", "classic", "metro". По умолчанию "venom".

cssVars Object позволяет более тонко настроить вид плеера. Значения можно обновить после инициализации с помощью VenomPlayer.setVariables({ ... }).


title String - название видео. Не отображается в теме "classic".

title: 'Video Title'

ui.titleOnlyOnFullscreen Boolean если включена, то название видео будет отображаться только в полноэкранном режиме.

ui: {
    titleOnlyOnFullscreen: true
}


Тексты и переводы

text, translations изменить текст и перевод.

text: {
    settings: 'Настройки'
},
translations: { // позволяет изменить или дополнить переводы
    en: {
        settings: '[ Settings ]'
    }
}



КлючЗначение по умолчанию
blockedВидео заблокировано
muteОтключить звук (m)
unMuteВключить звук (m)
pauseПауза (пробел)
playСмотреть (пробел)\nили клик по плееру
fullscreenEnterПолноэкранный режим (f)
fullscreenExitВыход из полноэкранного режима (f)
pipInРежим "картинка в картинке"
pipOutВыйти c режима "картинка в картинке"
settingsНастройки
qualityКачество
soundОзвучка
speedСкорость
ccСубтитры
offОткл
playlistСписок воспроизведения
emptyListСписок пуст
SeasonСезон
seasonсезон
episodeСерия
episodesСерии
nextСледующая
prevПредыдущая
selectВыбрать
secondsсекунд
backназад
nextInСледующая серия запустится через
reportСообщить о проблеме
describeProblemОпишите проблему
emailEmail
cancelОтмена
submitОтправить
copyКопировать
shareПоделиться ссылкой
shareWithПоделиться с помощью
copyUrlКопировать URL видео
copyWithTimeКопировать URL видео с привязкой ко времени
skipAdПропустить рекламу
after\nможно через
secсек
onlineОнлайн
goLiveВ онлайн
themeWrongVersionверсия темы не совпадает с версией плеера
themeLoadFailedне удалось загрузить тему