Question

我有一个自定义包装器组件

<wrapperC>
    <iframe title='abc' width='600' height='415' src={`https://www.youtube.com/watch?v=RKjk0ECXjiQ?autoplay=0`} allowFullScreen />
</wrapperC>

如果有人点击了视频播放按钮，我无法找到捕获onClick事件的方法。

onClick = () => {
    alert('clicked');
}

render() {
    const {
        children
    } = this.props;

    return (
        <div>
            <SomeOtherComponent onEnter={this.onEnter} onLeave={this.onLeave}>
                {React.cloneElement(children, { onClick: this.onClick })}
            </SomeOtherComponent>
        </div>
    );
}

有人可以建议我捕捉iframe视频上的点击事件，这也可以让我播放视频。

Answer 1

我最终创建了一个包装google you tube library的包装器组件。此库呈现iframe并允许访问视频生活事件。

Answer 2

使用自定义视频播放器（实际上是iframe）时遇到了这样的问题。我结束了包装。最后看起来像：

<div style={{
position: 'relative'
}}
 onClick={() => {
   console.log('hello'); //add your code here
 }}
>
  <div
  style={{
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    'z-index': 100,
  }}
  }/>
  <iframe/> //you could use your custom React component which are iframe under the hood
</div>

在

2 个答案: