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

Question

Here 我找到了一个示例，我可以如何收听 youtube iframe 的 Play\Pause 按钮。

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

现在我需要听听音量变化。在 youtube 文档和中，我找到了一个方法 player.getVolume()，但如果我想从 iframe 端获知音量变化，而不是从我的 iframe 询问，我不知道如何实现这个方法边.

On YouTube Player Demo page such functionality exists (when I change the volume of a player, I see appropriate changes in the row Volume, (0-100) [current level: **]), but neither 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)

可能不是最好的方法，但似乎没有其他选择（我也尝试监听音量条适当样式的变化，但由于跨域问题没有运气）。

所以，这让我们 'listen' 改变了 youtube 的音量。

以防万一，如果有人要设置youtube音量，你需要使用[this.]player.setVolume(volume_from_0_to_100)

Answer 2

参见。

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

// 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，它可能随时更改，恕不另行通知。

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

How to listen volume changes of youtube iframe?

javascript

youtube

iframe

youtube-api

youtube-iframe-api