如何从外部组件设置 Youtube iframe 音量

Question

我正在使用 react-youtube 生成一个 youtube iframe

return (<Youtube
    id="video-player"
    videoId={id}
    opts={config}
    onReady={_onReady}
/>);

我的嵌入式播放器没有控件，因为它是背景覆盖。我不想对播放器事件做出反应，而是想使用我网站上的自定义滑块来更改视频的音量。

我的问题是访问 Youtube iframe 以进行 API 调用。

我想做这样的事情：

player.setVolume(event.target.value);

其中 player 是 Youtube iframe，事件是我的自定义滑块的值。

我尝试使用访问 iframe

let video = document.getElementById("video-player");
video.contentWindow.setVolume(20);

看起来它可以工作，但我收到此错误：

SecurityError: Permission denied to access property "setVolume" on cross-origin object

好像我无法通过这种方式访问​​ iFrame。

这是一个react项目，我使用的库是here

Answer 1

根据documentation，你应该可以这样做：

// callback method for the YouTube component
_onReady(event) {
    // store the player somewhere safe
    this.setState({
        "player": event.target
    });
}

然后你可以通过这样做来改变音量：

// your volume value should be stored in the state
this.state.player.setVolume(this.state.volume);

您的代码不起作用的原因是您无法访问不同域中的 iframe 中的内容。如果可能的话，你可以做很多讨厌的事情。