YouTube API -嵌入式iframe上的事件不工作

Question

我试图在AMP(加速移动页面)创建的YouTube视频上使用YouTube API获得"暂停"事件:https://ampbyexample.com/components/amp-youtube/

代码工作，我得到一个视频显示。我想做的下一件事是在视频暂停时做点什么。我已经看了一下如何做到这一点，我已经得到了当前的代码:

//The iframe generated from AMP does not give an ID so I have added one
$('#AMP_1 iframe').attr('id', 'yt_player');
//Load API code
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
 function onYouTubeIframeAPIReady() {
  player = new YT.Player('yt_player', {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}
function onPlayerReady() {
  console.log("READY");
}
function onPlayerStateChange() {
  console.log("STATE CHANGE");
}

当我运行这个时，我没有得到控制台错误，并且console.log调用都没有显示任何内容。玩家变量保持未定义。

AMP生成的iframe的URL中有"enablejsapi=1"

我需要做什么/我错过了什么，得到视频上的暂停事件?

Answer 1

您需要在函数onPlayerStateChange上设置参数以获取事件数据。

function onPlayerStateChange(event) {
    switch(event.data){
        case 2:
            console.log("PAUSE!")
            break;
    }
}

其他event.data列表

• -1(未启动)
• 0 (end)
• 1(玩)
• 2(暂停)
• 3(缓冲)
• 5(视频提示).