如何检测YouTube视频何时播放完毕?


92

我正在一个有大量嵌入式youtube视频的网站上工作,客户端希望在视频停止播放时显示弹出窗口。

我看着youtube api,似乎有一种方法可以检测视频何时结束:

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

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

有没有一种方法可以检测这些视频的结尾而无需更改任何现有视频(使用javascript)?


2
我唯一可以建议的是以编程方式将embed条目更改为include enablejsapi=1。如果它们在数据库中,则更改src属性应该相当容易。如果将它们静态插入HTML文件,则可能需要一些正则表达式。
下载

Answers:


174

这可以通过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
您如何将其与一页上的多个视频集成在一起?
motoxer4533 2012年

@ motoxer4533很好,我不必在同一页面上处理多个视频,但每页只能处理一个。不确定该API是否允许创建多个播放器以及是否检测到其各自的端点。
TK123 2012年

1
应该不难为多个玩家设置-只需设置多个var player1,var player2,var player 3等,然后多次运行设置代码-每个新的var
codeguy 2012年

也是使用iframe api进行类似操作的完整示例,developers.google.com
youtube /…

3
为了提高可读性,在检查状态时建议使用YT.PlayerState.ENDED。
巴特·伯格

-6

您可能想要做的是在所有页面上包含执行以下操作的脚本: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. 添加事件监听器等。

希望这可以帮助


1
不知道这是可能的,因为跨域规则
阿舍加兰
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.