Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

113
Views
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 answers
Answer question

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 Report

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!