在 iframe 嵌入上单击显示 div 或计数器开始

Posted 2023-05-09

【中文标题】在 iframe 嵌入上单击显示 div 或计数器开始

【英文标题】：On Iframe embed click show a div or counter start

【发布时间】：2017-08-08 00:44:14

【问题描述】：

当我点击 youtube embed Iframe 时，我试图显示或开始计数。 这是我的代码

    <iframe id="startcount"   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>

点击 youtube 嵌入视频 iframe 开始计数

帮帮我，我是 jquery 的新手。

谢谢大家

【参考方案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);
      );
    );

【讨论】：

不，它现在对我有用 :( 当我点击 youtube ifrmae 而不是开始计数时，谢谢

【参考方案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 视频并同时启动计时器的唯一方法。

谢谢大家。