Question

我试图在同一页面上嵌入多个玩家，但直到现在才取得成功。为了嵌入播放器，我们需要一个唯一的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有一篇关于这个问题的文章，但不幸的是我的知识有限，我需要一些帮助。

Answer 1

当你在一个页面上有多个玩家时，Kaltura建议使用拇指嵌入 - 这将嵌入在点击时播放的缩略图：

Thumb Embed

此方法采用与动态嵌入相同的参数。当用户点击＆＃34;时，缩略图嵌入将整个配置传递给kWidget.embed。在播放按钮上。当您需要在同一网页中嵌入多个播放器/条目时，建议使用此方法。 ThumbEmbed的语法与kWidget.embed（动态嵌入）相同，除了我们调用＆＃34; kWidget.thumbEmbed＆＃34;而不是＆＃34; kWidget.embed＆＃34;

此处有更多信息，包括示例Javascript和示例缩略图：

http://player.kaltura.com/docs/thumb

来自此链接的示例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>

Answer 2

为每个视频创建DIV容器 - 为其提供唯一ID，然后您可以定位它们并根据需要创建任意数量的视频。确保已加载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。

kaltura同一页面上的多个玩家

2 个答案: