如何从外部组件设置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);

播放器是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项目，我正在使用的库在这里

Answer 1

根据文档，您应该能够做到这一点：

// 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中的内容。如果可能的话，您可以做很多令人讨厌的事情。