如何检测 youtube 视频何时播放完毕？答案

【问题标题】：How to detect when a youtube video finishes playing?如何检测 youtube 视频何时播放完毕？
【发布时间】：2011-12-12 19:48:38
【问题描述】：

我正在开发一个包含大量嵌入式 youtube 视频的网站，客户希望在视频停止播放时显示一个弹出窗口。

我查看了 youtube api，似乎有一种方法可以检测视频何时结束：

http://code.google.com/apis/youtube/js_api_reference.html

但我无法像他们在该页面上提到的那样嵌入视频，因为这些视频都已经在网站上（通过粘贴嵌入代码手动添加了数千个视频）。

有没有办法在不更改任何现有视频的情况下检测这些视频的结尾（使用 javascript）？

【问题讨论】：

我唯一能建议的就是以编程方式更改嵌入条目以包含enablejsapi=1。如果它们在数据库中，那么更改src 属性应该相当容易。如果它们被静态插入到 HTML 文件中，您可能需要一些正则表达式。

标签： javascript flash api actionscript youtube

【解决方案1】：

这可以通过 youtube player API 完成：

http://jsfiddle.net/7Gznb/

工作示例：

    <div id="player"></div>

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

    <script>

        // create youtube player
        var player;
        function onYouTubePlayerAPIReady() {
            player = new YT.Player('player', {
              width: '640',
              height: '390',
              videoId: '0Bmhjf0rKe8',
              events: {
                onReady: onPlayerReady,
                onStateChange: onPlayerStateChange
              }
            });
        }

        // autoplay video
        function onPlayerReady(event) {
            event.target.playVideo();
        }

        // when video ends
        function onPlayerStateChange(event) {        
            if(event.data === 0) {          
                alert('done');
            }
        }

    </script>

【讨论】：

您是如何将其与一页上的多个视频集成的？
@motoxer4533 好吧，我不必处理同一页面上的多个视频，而是每页只处理一个。不确定 API 是否允许创建多个播放器并检测到它们的各个端点。
应该不难为多个播放器设置 - 只需设置多个 var player1、var player2、var player 3 等，然后多次运行设置代码 - 每个新 var
为了便于阅读，我建议在检查状态时使用 YT.PlayerState.ENDED。
如果您只是想在视频准备好后立即播放，API 现在提供autoplay 参数——将playerVars: { autoplay: '1' } 添加到初始化参数中。请参阅developers.google.com/youtube/player_parameters 了解更多信息。

【解决方案2】：

您可能想要做的是在所有页面上包含一个脚本，该脚本执行以下操作... 1. 找到 youtube-iframe ：按标题的宽度和高度搜索它，或者在其源中找到 www.youtube.com。你可以这样做... - 通过 for-in 循环遍历 window.frames，然后通过属性过滤掉

在当前页面的 iframe 中注入 jscript 添加 onYoutubePlayerReady must-include-function http://shazwazza.com/post/Injecting-JavaScript-into-other-frames.aspx
添加事件监听器等。

希望对你有帮助

【讨论】：

由于跨域规则，不确定这是否可能