我注意到我正在处理的项目有一些奇怪的行为，所以我决定隔离我的变量并直接从 youtube iframe API 文档中获取基本代码，我仍然看到同样的事情。 当我的视频第一次播放时，一切都按预期进行。但是，如果我点击“重播”按钮，onPlayerStateChange（使用 event.data==1 /“播放”）将触发两次，一次又一次。 知道为什么会发生这种情况，以及如何让“播放”的“playerstatechange”在重播时只触发一次？
<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'cOgj_5lYijo',
events: {
'onStateChange': onPlayerStateChange
}
});
}
// 5. The API calls this function when the player's state changes.
function onPlayerStateChange(event) {
if(event.data==1){
console.log("onplayerstate change happening: ",event)}
}
</script>
</body>
</html>我遇到了同样的问题，当我重播视频时，onPlay 触发了两次。 我尝试了不同的修复，要解决的主要问题是 iFrame 中的视频看不到组件的状态变化。
不过，视频本身是有状态可以使用的。 请注意，这是伪代码，这不是嵌入 YouTube 视频的方式，您需要添加 iFrame 等等，但我只想关注这里的解决方案。此外，它是一个 React 组件，但逻辑可以转换为其他框架。
我需要添加效果挂钩，因为触发我想要的功能在开关盒中不起作用。
您可以在这里找到 YouTube 视频的可能状态： https://developers.google.com/youtube/iframe_api_reference#onStateChange
我希望这可以帮助其他人节省我解决这个问题的时间 :) 非常欢迎对可能的改进发表评论！
import { useEffect, useState } from 'react'
const MyComponent = () => {
const [isPlaying, setIsPlaying] = useState(false)
const handleYouTubeStateChange = (youTubeState) => {
switch (youTubeState) {
case 1:
if (isPlaying === false) {
setIsPlaying(true)
}
break
case 0:
case 2:
setIsPlaying(false)
break
default:
break
}
}
useEffect(() => {
if (isPlaying) {
console.log('trigger the desired functionality here')
}
}, [isPlaying])
return
<YouTube
onStateChange={(state) => { handleYouTubeStateChange(state.data) }}
/>
}
export default MyComponent