Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

112
Visualizações
Play video different time of day

I want to display 4 different videos depending on time of day (right know I only have two), I tried this way but somehow its not working, can someone tell why or help me in another effective way?

setInterval(function() {
  var Today = new Date();
  var H = Today.getHours();
  if (H >= 5 && H < 12) {

    console.log("morning");

    document.getElementById("vid1").style.display = "block";
    document.getElementById("vid2").style.display = "none";


  } else if (H >= 12 && H < 21) {


    console.log("evening");

    document.getElementById("vid2").style.display = "block";

    document.getElementById("vid1").style.display = "none";


  } else {
    console.log("night");
  }
}, 3000);
<div>

  <video id="vid1" muted autoplay>
            <source src="video/goodmorning.mp4" type="video/mp4">
        
          </video>

</div>

<div>

  <video id="vid2" controls>
                <source src="video/teste.mp4" type="video/mp4">
            
              </video>

</div>

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

Instead of making two video elements instead you change the src of the video element depending on the time of day.

<div>

  <video id="vid" controls>
                <source src="video/goodmorning.mp4" type="video/mp4">
            
              </video>

</div>

And then in your js just set the src depending on your conditions. I have extracted out the function and set it to a variable. This way we can call the function when the page loads so the correct video plays, we then use the interval function to periodically check.

const playVideo = function() {
  var Today = new Date();
  var H = Today.getHours();
  var videoElement = document.getElementById("vid");
  videoElement.muted = true;
  videoElement.autoplay = true;
  videoElement.controls = true;
  if (H >= 5 && H < 12) {
    // If morning video is already set, do nothing and return
    if (videoElement.getElementsByTagName("source")[0].src === "video/goodmorning.mp4") {
       return
    }
    console.log("morning");

    videoElement.getElementsByTagName("source")[0].src = "video/goodmorning.mp4"


  } else if (H >= 12 && H < 21) {
    // If evening video is already set, do nothing and return
    if (videoElement.getElementsByTagName("source")[0].src === "video/teste.mp4") {
       return
    }

    console.log("evening");

    videoElement.getElementsByTagName("source")[0].src = "video/teste.mp4"


  } else {
    console.log("night");
  }
  video.load();
  video.play();
}

// call playVideo when the page loads so the correct video starts
// set interval to check every 3000ms and update accordingly.
playVideo();
setInterval(playVideo, 3000)

This way you do not need to worry about both of them playing, or having to hide one.

I have also added a check to see if the current video for that particular time is already correct. As you have this set to run every 3000 ms it will be constantly updating. If you wanted that to happen then omit the conditionals i added

about 4 years ago · Juan Pablo Isaza Relatório

0

A better solution is to directly change src on <source> tag and you could apply muted, controls and autoplay for it.

let video = document.querySelector('video')
let source = document.querySelector('source')
setInterval(function () {
 var Today = new Date();
 var H = Today.getHours();

 if (H >= 5 && H < 12 ) {

  source.src='video/goodmorning.mp4'
  video.muted = true
  video.autoplay =true 
  video.controls = false;
     video.load()
   

 }
 else if (H >= 12  && H < 21) {
   video.muted = false 
   video.autoplay = false;
   video.controls = true
  video.load();
   source.src="video/teste.mp4"
   console.log("evening");
   console.log(source.src)
   
  }
 else {
   console.log("night");  
 }
}, 3000);
<video id="vid1">
        <source src="video/goodmorning.mp4" type="video/mp4">
    
      </video> 


    <div>

        </div>

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda