我安装了 youtube-react API,你的 onPlay 函数可以工作,但问题是加载视频非常慢 <YouTube videoId={Projects.videoID} onPlay={autoplayChange} onPause={autoplayChange} onEnd={autoplayChange}/>
如何使用常规 iframe 和 youtube API 重新创建这个类似的功能?我找不到任何关于将其实现到reactjs 中的文档。 https://developers.google.com/youtube/iframe_api_reference谷歌 API 引用提到了 onStateChange 下的函数,但我无法弄清楚实现,我认为这里的某人可能可以解决我的问题。提前致谢。
最佳答案
查看 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' />
使用 Hook ,您可以添加 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}/>
);
}
关于javascript - 如何在 ReactJS 中使用 youtube onPlay={} 函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63819539/