隐藏页面内容直到视频中的特定时间

Question

我和我的员工一直在研究如何设置一个页面来隐藏内容，这些内容会出现在 Youtube 视频的特定位置。

我们一开始使用 settimeout() 函数很快就到达了那里，但这只是经过时间，而不是视频中的时间。如果视频暂停，例如，在指定的时间长度之后，隐藏的内容仍然会出现。

这是我们目前的代码：

<p>
<script type="text/javascript">// <![CDATA[
    function showIt() {
        document.getElementById("hid").style.display = "block";
    }
    setTimeout("showIt()",30000);
    // 1000 = 1 sec | 60000 is 1 minute
    // ]]></script>
</p>
<p>{youtube}Yhwk5OorNPw&amp;rel=0&amp;autoplay=1&amp;showinfo=0&amp;version=3|640|390{/youtube}</p>
<div id="hid" style="display: none;">
    <p style="text-align: center;"><span style="font-size: 32pt; color: #ff6600;"><strong><a target="_blank" href="http://www.youtube.com/watch?v=K80leSIhSD4"><span style="color: #ff6600;">HEY RICK - You can buy a Website Now!</span></a></strong></span></p>
</div>

如果您知道一种方法可以在视频到达特定时间时触发它，那将非常有帮助！！！

Answer 1

最好的方法是每秒钟获取当前的 YouTube 视频时间。

您可以使用 setInterval 每隔几秒调用一次该函数。在该功能中获取当前的 YouTube 视频时间并基于该时间进行操作。我认为这是一种可靠的方法

请查看this 答案。从答案中您可以了解如何从 YouTube 播放器获取当前播放时间。希望对你有帮助

编辑

我猜你想在视频 30 秒后显示隐藏的内容。为此，您必须捕获 youtube 视频当前时间。要获取当前时间，您必须使用 youtube API。您可以了解有关 API 的更多信息。您将从here获得有关 API 的更多信息

一旦你得到当前时间（你会在几秒钟内得到），如果你使用 api，你可以使用以下逻辑来显示隐藏的内容

<script type="text/javascript">
var timerForLoadingResult=  setInterval(showIt,1000);//call the fnction in every seconds.
     function showIt() {
       var currentTime=GetCurrentYoutubeTime(); // this function must return a current time in seconds
       if(currentTime>=30) // i guess u need to show up after30 th second
        {
          document.getElementById("hid").style.display = "block";
          clearInterval(timerForLoadingResult);        //it will clear the timer, so the function will not excecute again
        }
      }
     function  GetCurrentYoutubeTime()
    {
      // fetch youtube video time using api . and return that value
    }
 </script>