Azure Media Player 的多个实例使音量控制无用答案

【问题标题】：Multiple instances of Azure Media Player render volume control uselessAzure Media Player 的多个实例使音量控制无用
【发布时间】：2018-11-14 04:32:08
【问题描述】：

我在一个页面上有多个，并希望让 AMP (2.2.2) 在所有当前页面上自动创建 AMP

播放正常，但音量控制仅适用于最后一个 AMP 实例。在其他视频上切换静音实际上会影响最后一个视频的静音或音量。

是否可以通过 Javascript 或 AMP 设置解决此问题？

干杯，

【问题讨论】：

你能发布你的代码吗？
我有多个这样的 ...切换静音会影响所有播放器。
他们都有相同的id？
不，它们都有不同的 ID。正常播放，暂停一切都好，除了声音控制。对声音的任何更改都适用于所有玩家。但如果我确实为每个播放器动态创建，那么声音控制似乎按预期工作。但我确实想保留
这感觉像是 AMP 脚本探测 HTML 代码以获取

标签： javascript azure video-streaming

【解决方案1】：

当您在同一页面上有多个视频播放器时，这并没有解决我的播放器和音量控制问题。是的，我有玩家的唯一 ID。对我来说唯一的解决方法是将播放器包含在 iframe 中。

请看这里：Azure media player multiple instances volume issue

【讨论】：

请修正语法和错别字。

【解决方案2】：

在 1 个页面上拥有多个 AMP 实例的唯一解决方法是使用 JS 动态化 AMP 实例以避免音量控制问题。

我拥有的是一个空白 div，其中包含一个空白视频，例如：

  <div class="video-wrapper"><video id="vid1" controls preload="none" class="amp-video" tabindex="0" data-src="videoUrl" data-type="videoType"></video></div>

然后使用 jquery 按需对其进行初始化。我的要求有点复杂，因为我在动态加载的不同模块中有内容。因此，在用户单击某些内容之前，我必须在页面加载时不加载任何内容。

$('.amp-video').each(function(){
var $v = $(this);
$v.addClass('azuremediaplayer amp-default-skin amp-big-play-centered');
              myPlayer = amp($v.attr('id'), {
                techOrder: ["azureHtml5JS", "html5"],
                "nativeControlsForTouch": false,
                autoplay: !$v[0].muted,
                muted: $v[0].muted,
                controls: true,
                width: "100%",
                height: "100%"
              });
});

【讨论】：

【解决方案3】：

使用循环初始化的播放器似乎存在一些问题。由于所有播放器都是同时创建和渲染的，因此音量控制仅适用于最后一个播放器实例。所以我在 amp 方法中使用了 onReady 函数，并使用了延迟一秒的递归。（等待音量控制应用于每个播放器）。它对我有用。

let vPlayer = [];
const playOptions = { // Options
  techOrder: ["azureHtml5JS", "flashSS", "html5FairPlayHLS", "silverlightSS", "html5"],
  autoplay: false,
  controls: true,
  poster: "",
  logo: { enabled: false },
};
const initPlayerInstances = () => {
  let oldLength = vPlayer.length;
  setEachPlayerViaRecursive(vPlayer.length, () => {
    console.log(vPlayer);
    setVideoSource(oldLength);
  })
}

/**
 * intialize each amp instance and wait for a second for it load in DOM
 * and then go for the next operation. otherwise its mute and unmute are not working
 * @param index intial index of vPlayer list
 * @param callback when all vPlayers added go back and do next operations
 */
const setEachPlayerViaRecursive = (index, callback) => {
  vPlayer[index] = amp('azuremediaplayer' + (index), playOptions, () => {
    setTimeout(() => {
      if (videoList.length - 1 > index) {
        setEachPlayerViaRecursive(index + 1, callback);
      } else {
        callback()
      }
    }, 1000)
  })
}


/**
 * when all players initialized successfully, then set player urls
 * for each vPlayer instance
 */
const setVideoSource = (oldLength) => {
  vPlayer.forEach((player, i) => {
    if (i > (oldLength - 1)) {
      player.src([{
        src: videoList[i].VideoUrl,
        type: "application/vnd.ms-sstr+xml"
      }]);
    }
  })
}

最后调用initPlayerInstances方法。

initPlayerInstances();

【讨论】：