Question

我正在为朋友制作一个简单的单页网站，其中包含一个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();
    }
}

YouTube视频结束后隐藏div

1 个答案: