Jquery YouTube API-播放/暂停切换按钮

我有一个嵌入的YouTube视频，前面有一个透明的PNG“框架”，所以我需要在PNG前面有一个不可见的播放/暂停按钮。一切正常，视频播放onClick，但播放后我无法暂停视频。我尝试了下面“第4节”的几种变体，但似乎没有任何效果。有人能告诉我我错过了什么吗

    var video_id = $('#video-player').attr('data-id');
    // 1. 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);

    // 2. This function creates an <iframe> (and YouTube player) after the API code downloads.
    var player;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('video', {
            width: '470',
            height: '263',
            videoId: 'ubvR6_pwpIk',
            playerVars: {
                modestbranding: 1,
                controls: 0,
                showinfo: 0,
                wmode: 'opaque',
                branding: 0,
                autohide: 0,
                rel: 0
            },
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

    // 3. The API calls this function when the video player is ready.
    function onPlayerReady(event) {
        $('#video-button').click(function(event){
            player.playVideo();
        });
    }

    // 4. The API calls this function when the player's state changes.
    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING) {
            $('#video-button').click(function(event){
                player.pauseVideo();
            });
        }
        else {
            $('#video-button').click(function(event){
                player.playVideo();
            });
        } 
    }

var video_id=$（'video player'）.attr（'data-id'）；
// 1. 此代码异步加载IFrame播放器API代码。
var tag=document.createElement（'script'）；
tag.src=”https://www.youtube.com/iframe_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
// 2. 此函数在API代码下载后创建一个（和YouTube播放器）。
var播放器；
函数onyoutubeiframeapiredy（）{
播放器=新的YT.player（'视频'{
宽度：“470”，
高度：'263'，
videoId:“ubvR6_pwpIk”，
playerVars：{
第一,，
控件：0，
showinfo:0，
wmode:'不透明'，
品牌：0，
自动隐藏：0，
rel:0
},
活动：{
“onReady”：onPlayerReady，
“onStateChange”：onPlayerStateChange
}
});
}
// 3. 当视频播放器准备就绪时，API调用此函数。
函数onPlayerReady（事件）{
$（“#视频按钮”）。单击（函数（事件）{
player.playVideo（）；
});
}
// 4. 当播放器的状态改变时，API调用此函数。
函数onPlayerStateChange（事件）{
if（event.data==YT.PlayerState.PLAYING）{
$（“#视频按钮”）。单击（函数（事件）{
player.pauseVideo（）；
});
}
否则{
$（“#视频按钮”）。单击（函数（事件）{
player.playVideo（）；
});
} 
}

我不确定您的情况：

if (event.data == YT.PlayerState.PLAYING) {

请尝试以下方法：

var state = player.getPlayerState();
if(state==1){

以下是州列表：

• -1：未开始
• 0:结束
• 1:玩
• 2:暂停
• 3：缓冲
• 5：视频提示

编辑
因为同样的结果

尝试在

onPlayerStateChange

中console.log一些内容。…
只是看看它是否真的着火了。
我建议您使用console.log记录我在上面建议的

状态

变量。
还要尝试console.log

事件

，以确认它是否存在

如果这些调试测试没有显示任何信息，我会感到惊讶

---
我刚刚在文档中发现：

function onYouTubePlayerReady(playerId) {
  ytplayer = document.getElementById("myytplayer");
  ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}

function onytplayerStateChange(newState) {
  alert("Player's new state: " + newState);
}

---

我不确定你在这里的情况：

if (event.data == YT.PlayerState.PLAYING) {

请尝试以下方法：

var state = player.getPlayerState();
if(state==1){

以下是州列表：

• -1：未开始
• 0:结束
• 1:玩
• 2:暂停
• 3：缓冲
• 5：视频提示

编辑
因为同样的结果

尝试在

onPlayerStateChange

中console.log一些内容。…
只是看看它是否真的着火了。
我建议您使用console.log记录我在上面建议的

状态

变量。
还要尝试console.log

事件

，以确认它是否存在

如果这些调试测试没有显示任何信息，我会感到惊讶

---
我刚刚在文档中发现：

function onYouTubePlayerReady(playerId) {
  ytplayer = document.getElementById("myytplayer");
  ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}

function onytplayerStateChange(newState) {
  alert("Player's new state: " + newState);
}

---

我认为它们是可互换的-根据iframe API参考：可能的值是：-1（未开始）0（结束）1（播放）2（暂停）3（缓冲）5（视频提示）。。。在代码中，可以指定整数值，也可以使用以下命名空间变量之一：YT.PlayerState.ENDED YT.PlayerState.PLAYING YT.PlayerState.PAUSED YT.PlayerState.BUFFERING YT.PlayerState.CUED我尝试了您的代码，但得到了相同的结果。。。还有其他想法吗？（谢谢你的帮助！）我刚刚做了一个编辑。。。检查在所有这些情况下是否有工作始终检查控制台。。。始终检查控制台。。。非常感谢。我以为这是我的代码，但事实并非如此。Chrome控制台错误使我走上了指向Chromecast扩展的道路。当我禁用Chromecast分机时，一切正常。（签入不同的浏览器也会有帮助，但再次…我认为问题出在我身上。）非常感谢您的帮助--我感谢您的时间和专业知识。我认为它们可以互换-根据iframe API参考：可能的值为：-1（未开始）0（结束）1（播放）2（暂停）3（缓冲）5（视频提示）. ...在代码中，可以指定整数值，也可以使用以下命名空间变量之一：YT.PlayerState.ENDED YT.PlayerState.PLAYING YT.PlayerState.PAUSED YT.PlayerState.BUFFERING YT.PlayerState.CUED我尝试了您的代码，但得到了相同的结果。。。还有其他想法吗？（谢谢你的帮助！）我刚刚做了一个编辑。。。检查在所有这些情况下是否有工作始终检查控制台。。。始终检查控制台。。。非常感谢。我以为这是我的代码，但事实并非如此。Chrome控制台错误使我走上了指向Chromecast扩展的道路。当我禁用Chromecast分机时，一切正常。（签入不同的浏览器也会有所帮助，但再一次……我认为问题出在我身上。）非常感谢您在这方面的帮助——我感谢您的时间和专业知识。