Javascript 如何将youtube onPlay={}函数与ReactJS一起使用？

我安装了youtube react API，您也可以使用onPlay功能，但问题是加载视频的速度非常慢

---

如何使用带有youtube API的常规iframe重新创建类似的函数？我找不到任何关于在reactjs中实现此功能的文档。GooglesAPI参考中提到了onStateChange下的函数，但我想这里的人可能对我的问题有答案，但我想不出是什么实现。提前感谢。

查看

react player

，您可以使用npm快速安装它：

npm install react-player

它速度很快，可以让您对正在寻找的onPlay功能有很大的控制。示例来自：

从“React”导入React
从“react player/lazy”导入ReactPlayer
//延迟加载YouTube播放器

使用钩子，您可以添加以下功能：

import React, { useState } from 'react'
import ReactPlayer from 'react-player/lazy'

const MyPlayer = () => {

    const [ playState, setPlayState ] = useState(false);

    const yourFunction = (event) => {

        console.log('Your event: ', event);

    };

    return (
        <ReactPlayer 
            url='https://www.youtube.com/watch?v=ysz5S6PUM-U'
            playing={playState}
            onPlay={yourFunction}/>
    );

}

import React，{useState}来自“React”
从“react player/lazy”导入ReactPlayer
常量MyPlayer=（）=>{
const[playState，setPlayState]=useState（false）；
const yourFunction=（事件）=>{
log（'您的事件：'，事件）；
};
返回(
);
}

Thank man将试一试我想根据记忆我以前尝试过使用这个，但在控制台中遇到了很多DOM错误问题，这让我很害怕lol，如果它能工作，我会报告though@lukeet如果出现错误，我很乐意帮助你克服，只要打开一个新的问题，打电话给我，我就会带你思考如何解决这些讨厌的警告！非常感谢您的帮助，非常感谢@卢基特别担心，我会在接下来的几分钟里看你的个人资料。想提出一个新问题吗？我知道原因，可以提供一些背景。好的，谢谢，现在就开始提问，如果是的话，我会以更新的形式在编辑中发布

import React, { useState } from 'react'
import ReactPlayer from 'react-player/lazy'

const MyPlayer = () => {

    const [ playState, setPlayState ] = useState(false);

    const yourFunction = (event) => {

        console.log('Your event: ', event);

    };

    return (
        <ReactPlayer 
            url='https://www.youtube.com/watch?v=ysz5S6PUM-U'
            playing={playState}
            onPlay={yourFunction}/>
    );

}