Параметры
Подключение Веб-плеера
Пример<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 | Опишите проблему |
email | |
cancel | Отмена |
submit | Отправить |
copy | Копировать |
share | Поделиться ссылкой |
shareWith | Поделиться с помощью |
copyUrl | Копировать URL видео |
copyWithTime | Копировать URL видео с привязкой ко времени |
skipAd | Пропустить рекламу |
after | \nможно через |
sec | сек |
online | Онлайн |
goLive | В онлайн |
themeWrongVersion | версия темы не совпадает с версией плеера |
themeLoadFailed | не удалось загрузить тему |