關於嵌入iframe單擊顯示div或計數器開始

Question

我試圖顯示或開始計數，當我點擊一個youtube嵌入Iframe。 這裏是我的代碼

<iframe id="startcount" width="900" height="400" src="https://www.youtube.com/embed/qAM8wEHPccU" frameborder="0" allowfullscreen></iframe> 

    <span align="center" style="color:#0091bf; font-weight:bold; font-size:24px;">You will be redirected in 
    <span id="counter">30</span> second(s) for credit verification. </span> 

    <script type="text/javascript"> 


    $(document).ready(
    function() { 
     $("#startcount").click(function() { 

       function countdown() { 
       var i = document.getElementById('counter'); 
       if (parseInt(i.innerHTML)<=0) { 
       //location.href = 'earn_credit_ac.php?ads_id=<?php echo $del_id; ?>'; 
       } 
       i.innerHTML = parseInt(i.innerHTML)-1; 
       } 
       setInterval(function(){ countdown(); },1000); 

       }); 
    }); 


    </script> 

1. 點擊YouTube上的視頻內嵌iframe的
2. 開始計數

幫助我，我在jQuery的新。

感謝所有

Answer 1

如果您正在倒計時，那麼你應該檢查，如果該值大於0，不小於0 下面的代碼應該工作：

$(document).ready(function() { 
     $("#startcount").click(function() { 
     function countdown() { 
      var i = $("#counter"); 
      var value = parseInt(i.html()); 
      var interval; 

      if (value >= 0) { // I think you want "greater equal" (>=) instead of "less equal" (<=) 
      //location.href = 'earn_credit_ac.php?ads_id=<?php echo $del_id; ?>'; 
      } 
      else { 
       clearInterval(interval); // stop interval if counted to -1 
      } 

      i.html(value - 1); 
     } 

     setInterval(countdown, 1000); 
     }); 
    }); 

Answer 2

我使用另一種方法來完成這項任務。

HTML：

<button id="play-button" class="btn mobile-full" style="padding:10px;"> Play </button> 

    <iframe id="video" src="//www.youtube.com/embed/NV16WtEXP6E?autohide=2&border=0&wmode=opaque&enablejsapi=1&modestbranding=1&controls=0&showinfo=1&rel=0" frameborder="0" allowfullscreen></iframe> 

    <div align="center"> 
    <span align="center" style="color:#0091bf; font-weight:bold; font-size:24px;">You will be redirected in 
<span id="counter"><?php echo $vid_duration; ?></span> second(s) for credit verification. </span> 
</div> 

的CSS：

.button { 
    width: 48px; 
    height: 48px; 
    cursor: pointer; 
    &:hover { 
    fill: white; 
    } 
} 

.defs { 
    position: absolute; 
    top: -9999px; 
    left: -9999px; 
} 

iframe { 
    float: left; 
    width: 300px; 
    height: 200px; 
} 

.buttons { 
    padding: 1rem; 
    background: #f06d06; 
    float: left; 
} 

的JavaScript：

<script> 

// https://developers.google.com/youtube/iframe_api_reference 

// global variable for the player 
var player; 

// this function gets called when API is ready to use 
function onYouTubePlayerAPIReady() { 
    // create the global player from the specific iframe (#video) 
    player = new YT.Player('video', { 
    events: { 
     // call this function when player is ready to use 
     'onReady': onPlayerReady 
    } 
    }); 
} 

function onPlayerReady(event) { 

    // bind events 
    var playButton = document.getElementById("play-button"); 
    playButton.addEventListener("click", function() { 
    player.playVideo(); 

    function countdown() { 
     var i = document.getElementById('counter'); 
     if (parseInt(i.innerHTML)<=0) { 
      location.href = 'earn_credit_ac.php?ads_id=<?php echo $del_id; ?>'; 
     } 
     i.innerHTML = parseInt(i.innerHTML)-1; 
    } 
    setInterval(function(){ countdown(); },1000); 

    }); 



} 

// Inject YouTube API script 
var tag = document.createElement('script'); 
tag.src = "//www.youtube.com/player_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 


</script> 

這是移動設備上播放，並同時YouTube視頻開始的時間計數器的唯一途徑。

感謝所有。