javascript - YouTube视频结束时隐藏Div

Question

我绝对有一个div，其中嵌入了YouTube视频。我将其放置在网站上的另一张图片上，目的是向首次访问者展示一个简短的视频，然后将带有视频的div隐藏起来以显示页面的原始内容。

我知道如何使用click事件隐藏和显示div，但是我对Java语言很陌生。我需要编写有关确定YouTube视频已结束并应用了能见度的功能的帮助:对我的div隐藏。任何帮助是极大的赞赏!

Answer 1

您需要仔细查看documentation，尤其要注意“事件”部分。

您将使用

onStateChange: This event is fired whenever the player's state changes. Possible values are unstarted (-1), ended (0), playing (1), paused (2), buffering (3), video cued (5). When the SWF is first loaded it will broadcast an unstarted (-1) event. When the video is cued and ready to play it will broadcast a video cued event (5).

并且您将想在状态等于0时做点什么，这意味着结束，类似于以下内容:

// attach your listener
    function onYouTubePlayerReady(playerId) {
      var ytplayer = getElementById("myytplayer");
      ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
    }
// your callback function   
    function onytplayerStateChange(newState) {
       if (newState === 0){
            $('yourContainingDiv').hide();
            // or if you want to just remove it...
            $('yourContainingDiv').remove();
       }
    }

如果您在使用addEventListener时遇到问题，请查看 YouTube player api - addEventListener() does not work for me?

早期版本的IE不支持addEventListener，并且可能会出现一些问题