如何在 ReactJS 中使用 youtube onPlay={} 函数？

Question

我安装了 youtube-react API 并且你可以使用 onPlay 功能，但问题是加载视频非常慢 <YouTube videoId={Projects.videoID} onPlay={autoplayChange} onPause={autoplayChange} onEnd={autoplayChange}/>

如何使用带有 YouTube API 的常规 iframe 重新创建类似的功能？我找不到任何关于将其实现到 reactjs 中的文档。 https://developers.google.com/youtube/iframe_api_reference googles API 参考文献提到了 onStateChange 下的函数，但我无法弄清楚实现我认为这里的人可能对我的问题有答案。提前致谢。

Answer 1

查看react-player，可以用npm快速安装：

npm install react-player

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

import React from 'react'
import ReactPlayer from 'react-player/lazy'

// Lazy load the YouTube player
<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />

使用钩子，您可以像这样添加 onPlay 功能：

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}/>
    );

}

如何在 ReactJS 中使用 youtube onPlay={} 函数？

How to use youtube onPlay={} function with ReactJS?

javascript

html

reactjs

youtube-javascript-api

youtube-iframe-api