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

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

The best way is get current YouTube video time in every seconds .

You can use setInterval to call the function every seconds. In that function get current YouTube video time and based on that do your operations.I think this is a reliable way

Please check this answer .From the answer you can understand how to get current play time from YouTube player. Hope it helps you

EDIT

I guess you want to show the hidden content after 30 second of the video. To do so you must capatur the youtube video current time.To get current time you must use youtube API .You can leanr more infor about API .You will get more info about API from here

Once you get the current time ( you will get that in seconds) if u use api you can use following logic to show up the hidden content

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