检测 youtube 视频何时结束 - javascript - 不起作用答案

【问题标题】：detect when youtube video ends - javascript - not working检测 youtube 视频何时结束 - javascript - 不起作用
【发布时间】：2014-10-28 15:38:57
【问题描述】：

我在 db 中有 youtube 视频（只有其中的 url）。它们采用这种形式：

http://www.youtube.com/embed/CT1909pdGBU

现在，我想检测视频何时结束并显示其他内容来代替视频容器。

我尝试了以下步骤：

1. changed the above youtube url to:

http://www.youtube.com/embed/CT1909pdGBU?version=3&enablejsapi=1

2. added this js code in videopage.html

    var player;
    function onYouTubePlayerAPIReady() {
        alert('api ready!');
        player = new YT.Player('player', {
          events: {
            'onStateChange': onPlayerStateChange
          }
        });
    }
    // when video ends
    function onPlayerStateChange(event) {
        if(event.data === 0) {
            alert('done');
        }
    }

但我既没有收到"api ready!" 也没有收到"done" 警报.. 我做错了什么？

【问题讨论】：

标签： javascript video youtube

【解决方案1】：

很简单：

    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('myyoutubevideo_iframe_div', {
            height: '410',
            width: '100%',
            videoId: '{{ video.yt_id }}',
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }
    function onPlayerReady(event) {
        event.target.playVideo();
    }
    var done = false;
    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED) {
            $('#myyoutubevideo_iframe_div').hide();
            $('#aftervideo_div').show();
        }
    }

【讨论】：