title: Play video at specific interval of time using javascript and post messege
body: <p>I have a simple app which I have three different videos, I want each video to play at certain time. As example:</p>
  
  <ol>
  <li><p>First video to play.</p>
  
  <p>between <code>5:00 AM</code> and <code>10:00 AM</code>.</p></li>
  <li><p>Second video to play.</p>
  
  <p>between <code>10:00 AM</code> and <code>22:00 PM</code>.</p></li>
  <li><p>Third video to play.</p>
  
  <p>between <code>22:00 PM</code> and <code>5:00 AM</code>.</p></li>
  </ol>
  
  <p>So assume if a user visited my app around <code>9:00 AM</code>. It should automatically play the first video. If the user visit around <code>11: 00 AM</code>, the second video plays, and etc.</p>
  
  <p>I want a function to run function at set interval only at certain time of the day using javascript and the postMessage function,</p>
  
  <p>Here is my solution:
  app.js </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var welcomeMovie1 = "http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4";
  var welcomeMovie2 = "http://mirrors.standaloneinstaller.com/video-sample/TRA3106.mp4"
  var welcomeMovie3 = "http://mirrors.standaloneinstaller.com/video-sample/Panasonic_HDC_TM_700_P_50i.mp4";
  var messageTime;
  
  //function to play a video1 to iframe using post messages
  function welcomeMessage1() {
    document.getElementById('videoframe').contentWindow.postMessage(
      JSON.stringify({
        event: 'playVideo(welcomeMovie1)'
      }),
      '*'
    )
  }
  //function to play a video2 to iframe using post messages
  function welcomeMessage2() {
    document.getElementById('videoframe').contentWindow.postMessage(
      JSON.stringify({
        event: 'playVideo(welcomeMovie2)'
      }),
      '*'
    )
  }
  //function to play a video3 to iframe using post messages
  function welcomeMessage3() {
    document.getElementById('videoframe').contentWindow.postMessage(
      JSON.stringify({
        event: 'playVideo(welcomeMovie2)'
      }),
      '*'
    )
  }
  //function to play a video1 to iframe using post messages at Specific time
  setInterval(function() {
    var messageTime = new Date().getHours();
    if (messageTime &gt;= 5 &amp;&amp; messageTime &lt; 10) {
      welcomeMessage1();
      console.log(welcomeMessage2());
    }
  }, 1000 * 60);
  
  //function to play a video2 to iframe using post messages at Specific time
  setInterval(function() {
    var messageTime = new Date().getHours();
    console.log(date.toLocaleString('en-GB'));
    if (messageTime &gt;= 10 &amp;&amp; messageTime &lt; 22) {
      welcomeMessage2();
      console.log(welcomeMessage2());
    }
  }, 1000 * 60);
  
  //function to play a video3 to iframe using post messages at Specific time
  setInterval(function() {
    var messageTime = new Date().getHours();
    if (messageTime &gt;= 22 &amp;&amp; messageTime &lt; 5) {
      welcomeMessage3();
    }
  }, 1000 * 60);
  
  // promise function to create custom video controls and play functions
  function playVideo(src) {
    $("#playervideo").attr("src", src);
    $("#playervideo")[0].muted = false;
  
    if (autoplay == true) {
  
      var playPromise = $("#playervideo")[0].play();
  
      if (playPromise !== undefined) {
  
        playPromise.then(function() {}).catch(function() {
  
          if (autoplay == true) {
            $("#video-unmute-button").addClass("show");
            $("#playervideo")[0].muted = true;
            var playPromise2 = $("#playervideo")[0].play();
  
            playPromise2.then(function() {
  
            }).catch(function() {
              $("#video-start-button").addClass("show");
  
  
              $("#video-start-button").on("click", function() {
                $("#playervideo")[0].muted = false;
                $("#playervideo")[0].play();
                $("#video-start-button").removeClass("show");
  
              });
            });
  
            console.log("pause force");
          } else {
  
          }
        });
      } else {}
    } else {
  
    }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Video Frame&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
    &lt;link rel="stylesheet" href="css/style.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;iframe id="videoframe" src="videoframe.html"&gt;&lt;/iframe&gt;
    &lt;br/&gt;
    &lt;!-- &lt;input id="name" type="text"/&gt; --&gt;
  
  &lt;/body&gt;
  &lt;script src="https://code.jquery.com/jquery-3.3.1.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.createjs.com/1.0.0/createjs.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/app.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="js/form.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is plunker for full demo: <a href="https://next.plnkr.co/edit/LEKcnlWKPAMC83GA?open=lib%2Fscript.js&amp;preview" rel="nofollow noreferrer">demo</a></p>
  
  <p>Unfortunately it's not working, </p>
  
  <p>What do I need to change in my code to get what I want? </p>