备用 <div> 每10秒显示一次内容无效

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:

1. 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> 

2. 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.

Answer 1

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

Answer 2

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/ `