在YouTube视频结束后隐藏div [英] hide div after YouTube video ends

问题描述

我正在为一个朋友制作一个简单的单页网站，其中包含一个YouTube视频嵌入。我不太熟悉YouTube API，但我得到了以下工作（见下文）。

I am working on a simple one page website for a friend, which contains a YouTube video embed. I'm not very familiar with the YouTube API, but I got the follow to work (see below). What do I need to change so that when the video completes the player disappears and a DIV is loaded.

<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>

推荐答案

假设你的脚本工作，你应该： / p>

Assuming your script works, you should just do :

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

对于检测视频的结束，您应该： / p>

As for the detection of the end of the video, you should do :

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

这篇关于在YouTube视频结束后隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！