Question

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

我知道如何使用点击事件隐藏和显示我的div，但我对Javascript很新。我需要帮助编写确定YouTube视频已结束的功能并应用可见性：隐藏到我的div。非常感谢任何帮助！

Answer 1

您要仔细查看documentation，特别注意事件部分。

您将使用

onStateChange：只要玩家的状态发生变化，就会触发此事件。可能的值是unstarted（-1），ends（0），playing（1），paused（2），缓冲（3），视频提示（5）。当SWF首次加载时它会广播一个未启动的（-1）事件。当视频被提示并准备好时播放它将播放视频提示活动（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?

addEventListener看起来早期版本的IE不支持它并且可能略有错误

YouTube视频结束时隐藏Div

1 个答案: