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。

这是一个反应项目，我使用的图书馆是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内的内容。如果可能的话，你可以做很多讨厌的事情。

如何从外部组件设置Youtube iframe卷

1 个答案: