如何检测YouTube视频播放结束?

99

我正在处理一个网站,其中有大量嵌入的YouTube视频,客户希望在视频停止播放时显示弹出窗口。

我查看了YouTube API,似乎有一种方法可以检测视频何时结束:

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

但是由于这些视频已经全部在网站上(通过粘贴嵌入代码手动添加了数千个),所以我不能像该页面上所提到的那样嵌入视频。

有没有办法在不更改任何现有视频的情况下,利用JavaScript检测这些视频的结束?


2
我唯一能建议的是通过编程方式更改嵌入条目以包括 enablejsapi=1。如果它们在数据库中,更改 src 属性应该相当容易。如果它们是静态插入到 HTML 文件中的,则可能需要一些正则表达式。 - Erin
2个回答

186

这可以通过YouTube播放器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>

1
你是如何将它与一个页面上的多个视频集成? - Damon Bauer
1
设置多个玩家应该不难 - 只需设置多个变量,如var player1、var player2、var player3等,然后多次运行设置代码 - 每次使用新的变量即可。 - codeguy
还有一个使用iframe API执行类似操作的完整示例,请参见此处:https://developers.google.com/youtube/iframe_api_reference#Getting_Started - JeremyWeir
4
为了更易读,建议在检查状态时使用YT.PlayerState.ENDED。 - Bart Burg
1
如果您只是想在视频准备好后立即播放,API现在提供了“autoplay”参数--将playerVars:{autoplay:'1'}添加到初始化参数中。有关更多信息,请参见https://developers.google.com/youtube/player_parameters。 - anon
显示剩余5条评论

-7
你可能想要做的是在所有页面上包含一个脚本,执行以下操作... 1. 查找YouTube-iframe: 通过宽度、高度、标题或查找其源中的www.youtube.com来搜索。您可以通过以下方式实现... - 通过for-in循环遍历window.frames,然后按属性进行过滤。
  1. 向当前页面的iframe注入jscript,添加onYoutubePlayerReady必须包含的函数。 http://shazwazza.com/post/Injecting-JavaScript-into-other-frames.aspx

  2. 添加事件监听器等。

希望这能有所帮助。

3
不确定是否由于跨域规则而不可能实现。 - Asher Garland

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接