Play video different time of day-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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