kaltura несколько игроков на одной странице

Я пытаюсь встроить более одного игрока на одну страницу, но до сих пор это не увенчалось успехом. Чтобы встроить проигрыватель, нам нужен уникальный target_id для таргетинга на элемент DOM, а затем entry_id конкретного видео. Это делается в следующей функции:

function embedPlayer() {
  var linkPart = $('#uniqueTarget').data('entry');
  var conf = {
    "targetId": "uniqueTarget",
    "wid": "_1912616",
    "uiconf_id": "37591811",
    "entry_id": linkPart,
    "flashvars": {
      "controlBarContainer.plugin": false,
      "inlineScript": false
    }
  };
  kWidget.thumbEmbed(conf);
}

Вот связанный HTML, который динамически создается из WordPress каждый раз, когда пользователь хочет встроить видео:

<div style="width: 100%; display: inline-block; position: relative;">
  <div class="theRatio"></div>
  <div id="uniqueTarget" data-entry="'+ linkPart +'" 
       style="position:absolute;top:0;left:0;right:0;bottom:0">
  </div>
</div>

К сожалению, если я попытаюсь встроить второй проигрыватель на ту же страницу, он выполнит вызов API только для первого проигрывателя, а второй (или остальные, если больше) оставит меня с простым HTML, и вызов не будет выполнен. Статья об этой проблеме размещена по адресу https://knowledge.kaltura.com/javascript-api-kaltura-media-players#ManagingMultiplePlayersontheSamePage, но, к сожалению, мои знания ограничены, и мне потребуется помощь.


javascript jquery video-player kaltura
person SharPei    schedule 09.05.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Kaltura рекомендует использовать вставку большого пальца, когда на странице несколько игроков — это встраивает миниатюры, которые будут воспроизводиться при нажатии на них:

Вставить большой палец

Этот метод принимает те же аргументы, что и динамическое встраивание. Встраивание миниатюр передает всю конфигурацию в kWidget.embed, когда пользователь нажимает кнопку воспроизведения. Этот метод рекомендуется использовать, когда вам нужно встроить несколько плееров/записей на одну и ту же веб-страницу. Синтаксис для ThumbEmbed идентичен для kWidget.embed (динамическое встраивание), за исключением того, что мы вызываем kWidget.thumbEmbed вместо kWidget.embed.

Здесь есть дополнительная информация, включая примеры Javascript и миниатюры примеров:

Пример Javascript по этой ссылке (вы также можете посмотреть страницу в отладчике браузера, чтобы точно увидеть, как они ее настроили):

<div id="myEmbedTarget" style="width:400px;height:330px;"></div>
<script src="{{HTML5LibraryURL}}"></script>
<script>
    mw.setConfig("EmbedPlayer.DisableContextMenu",true);
    kWidget.thumbEmbed({
        'targetId': 'myEmbedTarget',
        'wid': '_243342',
        'uiconf_id' : '12905712',
        'entry_id' : '0_uka1msg4',
    });
</script>
person Mick    schedule 09.05.2017

arrow_upward
0
arrow_downward

Создавайте DIV-контейнеры для каждого из ваших видео — присваивайте им уникальные идентификаторы, после чего вы можете ориентироваться на них и создавать столько видео, сколько захотите. Убедитесь, что скрипт kWidget загружен. Поместите этот скрипт на свою страницу:

function _embedVideo(targetId,wid,uiconf_id,flashvars,entry_id,cb){
    kWidget.embed({
        targetId: targetId,
        wid: wid,
        uiconf_id: uiconf_id,
        flashvars: flashvars || {},
        entry_id: entry_id,
        readyCallback: cb
    });
}

Для каждого из ваших видео загрузите их следующим образом:

_embedVideo('id-of-div-container','wid-here','uiconfid-here',null,'entryid-here',yourCallbackFunc);

Вот как я создаю несколько видео на своих страницах. Обязательно укажите обратный вызов, иначе передайте null.

person user1990962    schedule 11.05.2017