Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

111
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda