Question

我在db中有youtube视频（只有它们的网址）。他们是这样的形式：

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"警告......我做错了什么？

Answer 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();
        }
    }

检测youtube视频何时结束 - javascript - 无效

1 个答案: