mrmills129 mrmills129 - 5 months ago 16
Javascript Question

Load youtube video based on current time?

I have a webpage based slideshow (index.php), and would like to have a another page (commercial.php) interrupt it every 10 minutes or so, then go back to index.php once the commercial.php page has been up for X minutes.

I'm thinking the way to do it would have the javascript say "if current minutes is divisible by 10, load commercial.php. When commercial.php timer ends, load index.php". I just don't know how to put that into code... :(

Below is a test page I've created just to get the code working, then will move it to the real webpage...

<body>

<div id="time"></div>
<div class="frame" style="border:1px solid red;width:100%;height:90%;"></div>

<script>
function time() {
$("#time").text(new Date().getHours() + ":" + new Date().getMinutes() + ":" + new Date().getSeconds());
}
setInterval(time, 1000);
time();

//IF STATEMENT TO LOAD VIDEO IN DIV.FRAME?

</script>

</body>


Any help would be greatly appreciate.
Thank you!

Answer

So I took the approach of storing the minutes in a separate variable, and then using the modulus operator on it mins%10 to see if it equals 0.

function time() {
  var hours = new Date().getHours(),
      mins = new Date().getMinutes(),
      secs = new Date().getSeconds();

  $("#time").text(hours + ":" + mins + ":" + secs);

  if(mins%10 == 0) {
    console.log('sending to commercial.php');
    //location.href = 'commercial.php';
    loadVideo();
  }
}
//setInterval(time, 1000);
time();

function loadVideo(){
    console.log('loading video');
  $('<iframe>', {
   src: 'https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&autoplay=1',
   width: "560",
   height: "315",
   id:  'myFrame',
   frameborder: 0,
   scrolling: 'no'
   }).appendTo('.frame');
}

In the event that it does, you load your video. I wasn't sure if you were redirecting to a new page (which you could do with location.href or if you were going to just add it to the page. I took the approach of appending an iframe to the page.

Here's my example https://jsfiddle.net/enigmarm/rrgbfa8x/1/

Note that I commented out the interval. You'll want to keep track if a video has already been loaded or not, so for an entire minute, you're not just updating the same video repeatedly. Also, in my fiddle, I added 1==1 to the if block. That's just so you can see how the video is loading to your existing page.

As far as how long to display this for, I suppose that depends on where you're loading the video/commercial from. Ideally the video player has an event status that you can tap into. So when the video stops playing, you can detect that and return to the slideshow. YouTube's Player API has onStateChange. Otherwise, you'll have to know how long each commercial will take and then after 30 seconds (or whatever the length) you return to the slides.


As you're looking to have it fade in, you can use jQuery's fadeIn function. In order for this to work when you're adding a new element, you have to hide the element first display: none;. In my updated fiddle: https://jsfiddle.net/enigmarm/rrgbfa8x/3/ I just set iframe {display:none;}, then used.fadeIn(3000)` to fade it in over 3 seconds.

function loadVideo() {
  console.log('loading video');
  $('<iframe>', {
    src: 'https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&autoplay=1',
    width: "560",
    height: "315",
    id: 'myFrame',
    frameborder: 0,
    scrolling: 'no'
  }).appendTo('.frame').fadeIn(3000);
}