如何为 YouTube 视频手动输入的 iframe 捕获 OnStateChange 事件答案

【问题标题】：How to capture OnStateChange event for manually entered iframe for YouTube video如何为 YouTube 视频手动输入的 iframe 捕获 OnStateChange 事件
【发布时间】：2013-03-16 20:47:00
【问题描述】：

我需要能够捕获作为手动输入的 iframe（不是通过 javascript 构建）存在的 youtube 视频的 onstatechange 事件，但不幸的是，我不知道该怎么做，甚至不知道它是否可能。查看 YouTube 文档，有很多通过 JS 创建播放器时连接事件处理程序的示例，但我似乎无法找到一种方法来为预先存在的 iframe 执行此操作。我的代码如下：

<iframe id="video_player" enablejsapi="1" width="853" height="480" src="http://www.youtube.com/embed/ANYVIDEO rel=0&start=0&end=71" frameborder="0" allowfullscreen></iframe>


<script src="http://www.youtube.com/iframe_api"></script>

<script>
function onYouTubeIframeAPIReady(playerId) {
    player = document.getElementById("video_player");
    player.addEventListener("onStateChange", "video_state_change");
}
function video_state_change(data){
    alert("STATE_CHANGE: " + data);
}
</script>

提前感谢您提供的任何帮助或指导。

【问题讨论】：

标签： javascript iframe youtube

【解决方案1】：

您可以使用 SWFObject 来集成您的 youtube 播放器。

<object type="application/x-shockwave-flash" id="video_player" width="650" height="400" data="//www.youtube.com/v/ANYVID?version=3&amp;enablejsapi=1&amp;"><param name="allowScriptAccess" value="always"></object>

这将允许您使用 JS API。

下一步非常简单。将以下 JavaScript sn-p 添加到您的 HTML 文件中。

// Called automatically as soon as the player loads    
function onYouTubePlayerReady() {
    player = document.getElementById("video_player").get(0);
    player.addEventListener("onStateChange", "video_state_change");
}

【讨论】：