javascript - YouTube 视频结束后隐藏 div

Question

我正在为一个 friend 开发一个简单的单页网站，其中包含一个 YouTube 视频嵌入。我对 YouTube API 不是很熟悉，但我得到了后续工作(见下文)。我需要更改什么以便在视频播放完毕后播放器消失并加载 DIV。

<div id="player"></div>
<script>
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('player', {
        height: '390',
        width: '640',
        videoId: 'y-y8v4BClZE',
        events: {
            'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
        }
    });
}

function onPlayerReady(event) {
    event.target.playVideo();
}

var done = false;

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
        setTimeout(stopVideo, 720000);
        done = true;
    }
}

function stopVideo() {
    player.stopVideo();
}
</script>

Answer 1

假设您的脚本有效，您应该这样做:

function stopVideo() {
    player.stopVideo();
    document.getElementById("player").style.display = "none";
}

至于视频结束的检测，你应该这样做:

function onPlayerStateChange(event) {        
    if(event.data === YT.PlayerState.ENDED) {          
        stopVideo();
    }
}