如何收听YouTube iframe的卷更改

Question

在这里，我找到了一个示例，我可以如何收听youtube iframe的播放暂停按钮。

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

现在我需要聆听卷更改。在YouTube文档中，我在这里找到了一种方法player.getVolume()，但是如果我想了解iframe side的卷更改，而不是从我的身边问iframe，我不知道该方法如何实现。

在YouTube播放器演示页面上存在这样的功能（当我更改播放器的卷时，我在con Volume, (0-100) [current level: **]中看到适当的更改），但是在DOC和Internet中都没有找到如何实现它。

我还尝试将上述代码与onApiChange事件一起使用（对我而言，此事件实际上是什么），例如：

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

但控制台什么也没新颖。

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

任何人都可以举例说明吗？

Answer 1

请参阅此问题。

您可以收听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)
      }
    }
  });
}

看到它的现场。

请注意，这取决于可能随时随时更改的私人API。

Answer 2

我检查了YouTube播放器演示页面的代码，发现显示当前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)