Iframe and js problems

Question

Iframe and js problems

Navigation

#1 by (0 votes)

0

I have the following code that shows a regressive timer on my page, the idea is that when zeroing it shows an iframe (video), until it shows but the video keeps blinking as if it were only in an eternal update loop. If anyone has the solution I would appreciate being a beginner in this area.

(function ($) {

var launch = new Date(2018, 4, 25, 23, 42); 

var message = $('#message');
var days = $('#days');
var hours = $('#hours');
var minutes = $('#minutes');
var seconds = $('#seconds');

setDate();

function setDate(){
    var now = new Date();
    if( launch < now){
        days.html('<h1>0</H1><p>Dia</p>');
        hours.html('<h1>0</h1><p>Hora</p>');
        minutes.html('<h1>0</h1><p>Minuto</p>');
        seconds.html('<h1>0</h1><p>Segundos</p>');
        message.html('<iframe width="560" height="315" src="https://www.youtube.com/embed/IsHOEl5N0cA?rel=0&amp;start=289"frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>');
    }
    else{

            var s = -now.getTimezoneOffset()*60 + (launch.getTime() - now.getTime())/1000;
            var d = Math.floor(s/86400);
            days.html('<h1>'+d+'</h1><p>Dia'+(d>1?'s':''),'</p>');
            s -= d*86400;

            var h = Math.floor(s/3600);
            hours.html('<h1>'+h+'</h1><p>Hora'+(h>1?'s':''),'</p>');
            s -= h*3600;

            var m = Math.floor(s/60);
            minutes.html('<h1>'+m+'</h1><p>Minuto'+(m>1?'s':''),'</p>');

            s = Math.floor(s-m*60);
            seconds.html('<h1>'+s+'</h1><p>Segundo'+(s>1?'s':''),'</p>');
            setTimeout(setDate, 1000);

            message.html('PRÓXIMO TREINO INICIA EM... ');

        /**if(d == -1){
            days.html('<h1>0</H1><p>Dia</p>');
            hours.html('<h1>0</h1><p>Hora</p>');
            minutes.html('<h1>0</h1><p>Minuto</p>');
            seconds.html('<h1>0</h1><p>Segundos</p>');
            message.html('<iframe width="560" height="315" src="https://www.youtube.com/embed/IsHOEl5N0cA?rel=0&amp;start=289"frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>');
        }**/
    }
}

}) (jQuery);

javascript jquery html5

asked by anonymous 26.05.2018 / 16:37

1 answer

Compatibility issue between Visual Studio versions script le field of emails in googledocs

score 0 · Answer 1

Your problem is that the function is called all the time. Then the video is rendered every second, so it 'blinks'.

What you can do is to use the setInterval () function, setDate () function and the value 1000 (means that it will be executed every second) by assigning a variable. And inside the IF you use clearInterval () to cancel the function execution.

A small example to serve as your inspiration:

// Define a data limite
var countDownDate = new Date("Sep 5, 2018 15:37:25").getTime();

// Atualiza o cronometro a cada 1s
var x = setInterval(function() {

  // Pega a data e a hora de hoje
  var now = new Date().getTime();

  // Encontr a diferenca entre hoje e a data limite
  var distance = countDownDate - now;

  // Calcula dias, horas, minutos e segundos
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Mostra o resultado em id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  // Quando o prazo termina, mostra o texto 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);

<!-- Mostra o cronometro -->
<div id="demo"></div>

Good luck! ;)