ve-player v0.0.54

Venom web player

Пример:

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

Опции

publicPath (String) задаёт базовый путь, откуда будут загружаться темы. Например, если плеер подлючен из "https://cdn.jsdelivr.net/npm/venom-webplayer", то нужно указать "https://cdn.jsdelivr.net/npm/venom-webplayer/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'
    }
  }
}

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

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

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

title: 'Game of Thrones'

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

ui: {
    titleOnlyOnFullscreen: true
}

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

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

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

theme (String) тема, в данный момент доступны "main", "dropdown", "slider". По умолчанию "main"

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

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

quality: 720

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

speed: [1, 1.1, 1.25, 1.5]

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

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

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

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

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

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

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