venom-player

Venom player

Пример:

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

Опции

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

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

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

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

Для устройств, поддерживаемых hls только нативно (в осномном это мобильные c iOS и некоторые модели смарт ТВ) лучше использовать 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'
    }
  }
}

---

• 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" }
    }
  }
}

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

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

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

title: 'Game of Thrones'

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

ui: {
    titleOnlyOnFullscreen: true //fixme
}

poster (String) путь к постеру. Подробнее про poster тут

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

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

pip (Boolean | Number) true - добавить кнопку "picture in picture", по умолчанию false. При значении 0.5 переход в этот режим будет происходить автоматически, когда видимость плеера станет ниже 50%

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

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

theme (String) тема, в данный момент доступны "modern", "classic", "metro". По умолчанию "venom"

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

aspectRatio (String) соотношение сторон, по умолчанию '16:9'. Значение "fill" (заполнить всё доступное пространство) или "ширина:высота" (4:3, 10:9, 1:1...)

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

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

quality: 720

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

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

speed (Number[]) список значений, из которых пользователь сможет выбрать скорость воспроизведения

speed: [1, 1.1, 1.25, 1.5]

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

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

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

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

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

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

doNotSaveProgress (Boolean) if true then don't save progress to localStorage, по умолчанию false

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

replay повторять воспроизведение

reportUrl (String) url, на который будет отправляться обратная связь TODO

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

//TODO
ui: {
    lock: true, // показывать кнопку блокировки на мобильных, по умолчанию false
    // share: false, // спрятать кнопку поделиться, по умолчанию true
    // share: ['facebook', 'vkontakte'], // белый список
    // timeline: false, // по умолчанию true
    // fullscreen: 'external'|false, по умолчанию true
}

text, translations изменить надписи

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

preview TODO

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

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

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

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

События TODO

Методы TODO

Список воспроизведения TODO

TODO id playlist: {seasons,id,ignoreLast}, season: 2, episode: '13',

Модуль рекламы TODO

---

text

ключ	значение по умолчанию
themeWrongVersion	версия темы не совпадает с версией плеера
themeLoadFailed	не удалось загрузить тему

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