Alternate
content at every 10 seconds is not working

Question

Functionality:

I have 2 diff <div> content at the same page, hence, Content A is shown before Content B is shown and the loop will re-iterate again. Therefore, the process is as described below:

Content A (shown for 10seconds)-> Content B (shown for 10seconds) -> Content A (shown for 10 seconds) -> Content B (shown for 10 seconds)

Hence, the display of the content will be shown in an re-iteration for infinite loops.

Content A -> a list of jplayer content Content B -> a static <div> content

What has been done:

I have set the following:

Created a <div> for Content A:

<div id="M_Start" align= "center" style ="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; z-index=1; top:0px; left:0px;">

    <!--Video Div for Content A-->
    <div id="Start_Video" style="position:absolute;"></div>
</div>

Created a <div> for Content B:

<div id="I_Page" align= "center" style ="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; display: none; z-index=3; top:0px; left:0px;">
    <table cellspacing="0" cellpadding="0" width="1080">
        <tr>
            <td width="1080"  align="center">

                <div id="i_page_content" style="position:absolute; z-index:2; top:1020px; left:22px; overflow-y:scroll; overflow-x:hidden; height:820px; width:1050px;"></div>

            </td>
        </tr>
    </table>
</div>

Secondly, I have done setTimeInterval for both Content such that after 10 seconds, the contents will switch. My code as shown:

var videoList = ["lib/video/MainBackground.mp4", "lib/video/I.mp4"];
var videoIndex = 0;

setInterval(function() {

  $("#M_Video").jPlayer({
    ready: function() {
      console.log("currentPlaying " + videoList[videoIndex]);
      $("#M_Video").jPlayer("setMedia", {
        m4v: videoList[videoIndex]
      }).jPlayer("play");
    },
    ended: function() {
      videoIndex++;
      console.log("NewCurrent:" + videoIndex);
      console.log("current :" + videoList[videoIndex]);
      if (videoIndex >= videoList.length) {
        console.log("Next" + videoIndex);
        videoIndex = 0;
        
        //ContentB to fadeIn
        $('#IPage').fadeIn({ duration: slideDuration, queue: false });
      }
      $("#M_Video").jPlayer("setMedia", {
        m4v: videoList[videoIndex]
      }).jPlayer("play");
    },
    swfPath: "javascript",
    muted: true,
    loop: true,
    supplied: "webmv, ogv, m4v",
    size: {
      width: 1080,
      height: 1920
    }
  });
  $("#M_Video").show();
}, 10000);

<!--Content A -->
<div id="M_Start" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; z-index=1; top:0px; left:0px;">

  <!--Video Div-->
  <div id="M_Video" style="position:absolute;"></div>

  <button class="MilleniaStart" onclick="Start()"></button>
</div>


<!--Content B-->
<div id="IPage" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; display: none; z-index=3; top:0px; left:0px;">
  <table cellspacing="0" cellpadding="0" width="1080">
    <tr>
      <td width="1080" align="center">

        <div id="i_page_content" style="position:absolute; z-index:2; top:1020px; left:22px; overflow-y:scroll; overflow-x:hidden; height:820px; width:1050px;"></div>

      </td>
    </tr>
  </table>
</div>

Issue:

After the contents have been switched after 10secs, the switch of content stops and it does not re-iterate the switching of the content anymore. Meaning: after Content A has switched to Content B, it stops, when the correct behaviour should be Content A switched to Content B and then switches back to Content A before switching to Content B and to Content A, the re-iteration should never stops.

Hence, I do require some help. Please help. I do not know how to proceed or what has gone wrong.

Thank you.

@IPAddress The console log that I have is ` console.log("NewCurrent:" + videoIndex)` and the name of the videos that are playing. But am I in the right direction? and am I doing it correctly? — Luke, Jun 04 '16 at 15:55

score 1 · Answer 1 · edited May 23 '17 at 10:29

Try this:

/*** javascript/jQuery: ***/

var videoList = ["http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4", "http://www.html5videoplayer.net/videos/toystory.mp4"];
var videoIndex = 0;
console.log("current: " + videoList[videoIndex]);

$("#M_Video").jPlayer({
  ready: function() {
      $("#M_Video").jPlayer("setMedia", {
        m4v: videoList[videoIndex]
      }).jPlayer("play");
  },
  swfPath: "javascript",
  muted: true,
  loop: true,
  supplied: "webmv, ogv, m4v",
  size: {
    width: 500,
    height: 400
  }
});

setTimeout(swapVideo, 10000);

function swapVideo(){
  videoIndex++;
  if (videoIndex >= videoList.length) {
//console.log("Next < " + videoIndex);
    videoIndex = 0;
  }
//console.log("NewCurrent:" + videoIndex);
  $("#M_Video").jPlayer("destroy");
  $("#M_Video").jPlayer({
    ready: function() {
console.log("current: " + videoList[videoIndex]);
      $("#M_Video").jPlayer("setMedia", {
        m4v: videoList[videoIndex]
      }).jPlayer("play");
  },
  swfPath: "javascript",
  muted: true,
  loop: true,
  supplied: "webmv, ogv, m4v",
  size: {
    width: 500,
    height: 400
  }
  });
  setTimeout(swapVideo, 10000);
}

/*** CSS: ***/

.divs{position:absolute;top:0;left:0;width:500px;height:400px;background-repeat:no-repeat;}

#M_Start{z-index=1;}
  #M_Video{position:absolute;}

#IPage{z-index=3;display:none;}
  #i_page_content{height:400px;width:500px;overflow-y:scroll;overflow-x:hidden;z-index:2;}

<!-- *** HTML: *** -->

<link href="https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/skin/blue.monday/css/jplayer.blue.monday.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/jplayer/jquery.jplayer.min.js"></script>

<!--Content A -->
<div id="M_Start" class="divs" align="center">
  <div id="M_Video"></div>
  <button class="MilleniaStart" onclick="Start()"></button>
</div>

<!--Content B-->
<div id="IPage" class="divs" align="center">
  <table cellspacing="0" cellpadding="0" width="500">
    <tr><td width="500" align="center"><div id="i_page_content"></div></td></tr>
  </table>
</div>

Reference (please upvote):

jQuery jPlayer change media not working

Thanks. but I am a lil confused on what the javascript sample that you have given though. why have 2 setTimeout method? — Luke, Jun 06 '16 at 03:16
The player begins playing the first video. Without the first setTimeout, it would immediately swap videos, so the first timeout lets the first video play its duration. Inside the swapVideos function, it ends with second timeout, which replaces the more problematic `setInterval`. Google setInterval vs setTimeout to see why setInterval is problematic. — cssyphus, Jun 06 '16 at 15:29
[Here](http://javascript.info/tutorial/settimeout-setinterval) or [here](http://stackoverflow.com/a/731625/1447509) — cssyphus, Jun 06 '16 at 16:57

score 0 · Accepted Answer · answered Jun 04 '16 at 17:34

0

Well, if you are looking for just switching the div's after every 10 secs with infinite loop, check this fiddler. https://jsfiddle.net/nalinkaggarwal/vj01xezm/`

answered Jun 04 '16 at 17:34

Nalin Aggarwal

886
5
8

It is only showing video Content A but apparently it is not displaying the text of Content B. – Luke Jun 05 '16 at 01:42
well!! the top propery your are using, may be it getting out of the screen!! just remove the some of the css and tried it ..!! in my case i used your code and have to elemionate the css property top!!! – Nalin Aggarwal Jun 05 '16 at 19:57

Alternate content at every 10 seconds is not working

2 Answers2

Alternate
content at every 10 seconds is not working