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

Posted 2021-04-26

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

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)}。

谁能举个例子？

答案

我检查了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)