javascript - 每 10 秒替换一次 内容不起作用

Question

功能:

我有 2 个差异 <div>内容位于同一页面，因此，内容 A 先于内容 B 显示，并且循环将再次重复。因此，流程如下:

内容A(显示10秒)->内容B(显示10秒)->内容A(显示10秒)->内容B(显示10秒)

因此，内容的显示将无限循环地重复显示。

内容 A -> jplayer 内容列表内容B->静态<div>内容

已完成的工作:

我设置了以下内容:

1. 创建了 <div>对于内容 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. 创建了 <div>对于内容 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>
   

其次，我对两个内容都做了setTimeInterval，这样10秒后，内容就会切换。我的代码如图所示:

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>

问题:

10秒后内容切换完毕，内容切换停止，不再重复内容切换。含义:在内容A切换到内容B之后，它停止，当正确的行为应该是内容A切换到内容B，然后切换回内容A，然后切换到内容B和内容A时，重新迭代永远不应该停止.

因此，我确实需要一些帮助。请帮忙。我不知道如何继续或出了什么问题。

谢谢。

Answer 1

试试这个:

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

<小时/>

引用(请投票):

jQuery jPlayer change media not working