Question

Here我找到了一个如何收听youtube iframe播放\暂停按钮的示例。

player.addEventListener('onStateChange', function(e) {
    console.log('State is:', e.data);
});

现在我需要听音量变化。在YouTube文档和here中，我找到了一种方法player.getVolume()，但如果我想从iframe端获知有关音量变化的信息，而不是从我的问题中询问iframe，我不知道如何实现此方法侧。

On YouTube Player Demo page存在此类功能（当我更改播放器的音量时，我会在行Volume, (0-100) [current level: **]中看到相应的更改），但in the doc和互联网都无法找到实施它。

我还尝试将上述代码与onApiChange事件一起使用（我不清楚这个事件实际上是做什么的），例如：

player.addEventListener('onApiChange', function(e) {
    console.log('onApiChange is:', e.data);
});

但是控制台没有显示任何新内容。

player.getOptions();显示Promise {<resolved>: Array(0)}。

有人可以展示一个例子吗？

Answer 1

我检查了YouTube Player Demo page的代码，发现显示当前YouTube音量（<span id="volume">**</span>）的html行不断闪烁（每1秒约2次），所以我可以假设这个演示页使用这样的东西：

// YouTube returns Promise, but we need actual data
self = this
setInterval(function () { self.player.getVolume().then(data => { self.volumeLv = data }) }, 250)

可能不是最好的方法，但似乎没有其他选择（我也尝试听音量栏的相应风格的变化，但由于跨源问题没有运气）。

所以，这让我们'听'youtube的音量变化。

以防万一有人想设置YouTube音量，您需要使用[this.]player.setVolume(volume_from_0_to_100)

Answer 2

见this question。

您可以侦听 IFrame 发出的 postMessage 事件并仅对音量变化做出反应：

// Instantiate the Player.
function onYouTubeIframeAPIReady() {
  var player = new YT.Player("player", {
    height: "390",
    width: "640",
    videoId: "dQw4w9WgXcQ"
  });

  // This is the source "window" that will emit the events.
  var iframeWindow = player.getIframe().contentWindow;

  // Listen to events triggered by postMessage.
  window.addEventListener("message", function(event) {
    // Check that the event was sent from the YouTube IFrame.
    if (event.source === iframeWindow) {
      var data = JSON.parse(event.data);

      // The "infoDelivery" event is used by YT to transmit any
      // kind of information change in the player,
      // such as the current time or a volume change.
      if (
        data.event === "infoDelivery" &&
        data.info &&
        data.info.volume
      ) {
        console.log(data.info.volume); // there's also data.info.muted (a boolean)
      }
    }
  });
}

See it live。

请注意，这依赖于私有 API，该 API 可能随时更改，恕不另行通知。

如何收听youtube iframe的音量变化？

2 个答案: