javascript - YouTube API - 嵌入式 iframe 上的事件不起作用

Question

我正在尝试使用 YouTube API 在 AMP(加速移动页面)创建的 YouTube 视频上获取“暂停”事件，基本示例为: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(已结束)
• 1(正在播放)
• 2(暂停)
• 3(缓冲)
• 5(视频提示)。