Параметры

• Подключение Веб-плеера
• Медиа контент
• Управление
• Поведение
• Стилизация
• Тексты и переводы

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

Пример
<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 ]'
    }
}