Question

功能

当用户触摸<button>时，将播放视频列表中的视频。视频播放完毕后，第3页将fadeIn()。延迟5秒后，整个程序将通过location.reload();执行刷新。之后，当用户触摸<button>并且整个循环再次重复时，将再次播放来自视频列表的另外1个视频。

播放的视频将遵循声明的数组

中所述的顺序

var videolist=["video#3", "video#2", "video#1", "video#4"];

因此，流程是：

当用户点击
播放视频列表
在视频结尾（视频＃3），videoIndex将递增，并在延迟3秒后，程序刷新。
用户重复步骤1，然而，阵列中的第二个视频（视频＃2）将播放，而不是播放的第一个视频。

我做了什么：

我做了一个start（），它将播放视频阵列中的视频，并在每个播放视频的末尾递增每个videoIndex。

代码：

＆＃13;

var videoList = ["lib/video/A.mp4", "lib/video/B.mp4", "lib/video/C.mp4", "lib/video/D.mp4", "lib/video/E.mp4", "lib/video/F.mp4", ];
var videoIndex = 0;
var video_increment = [];


function StartTest() {

  $('#C_Main').fadeOut();
  //play fixed sequence "random" video
  $('#Chl_Selection').fadeIn();

  $("#Chl_Selection_Video").jPlayer({
    ready: function() {
      //console.log("currentPlaying " + videoList[videoIndex]);
      $("#Chl_Selection_Video").jPlayer("setMedia", {
        m4v: videoList[videoIndex]
      }).jPlayer("play");
    },
    ended: function() {
      //after video has played, increment the videoIndex
      videoIndex++;
      if (videoIndex >= videoList.length) {
        //console.log("Next" + videoIndex);
        videoIndex = 0;
      }
      console.log("videoIndex" + videoIndex);

      //push value of videoIndex into empty array for temporary store.
      video_increment.push(videoIndex);
      //set local storage
      localStorage.setItem("video_increment", video_increment);

      //Display Thank you page
      $('#Chl_Selection').fadeOut();
      $('#Chl_ThankYou').fadeIn(function() {
        setTimeout(function() {
          location.reload();
        }, 5000);
      });
    },
    swfPath: "javascript",
    muted: true,
    loop: true,
    supplied: "webmv, ogv, m4v",
    size: {
      width: 1080,
      height: 1920
    }
  });
}

＆＃13;

.Test {
  position: absolute;
  width: 1080px;
  height: 1740px;
  left: 0px;
  top: 180px;
  z-index: 100;
  outline: 0;
  border: 0;
  background: transparent;
}

＆＃13;

<script src="javascript/jquery-1.11.3.min.js"></script>
<script src="javascript/jquery-ui-1.10.3.min.js"></script>
<script src="javascript/jplayer.playlist.min.js"></script>
<script src="javascript/jquery.jplayer.min.js"></script>

<div id="C_Main" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; z-index=1; top:0px; left:0px;">

  <button class="Test" onclick="StartTest()"></button>

  <div id="Chl_Selection" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; display: none; z-index=2; top:0px; left:0px; margin:auto;">

    <!--Video Div-->
    <div id="Chl_Selection_Video" style="position:absolute;"></div>

  </div>

  <div id="Chl_ThankYou" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; display: none; z-index=3; top:0px; left:0px; margin:auto;">

    <!-- TEST IMAGE -->

    <img id="ThankYou" src="lib/img/Chl_ThankYou.png" style="position:absolute; left:0px; top:0px; width: 1080px; height:1920px;" />

  </div>

＆＃13;

问题：

此时，我可以显示播放初始视频后的videoIndex增量。但是，当整个程序刷新时，我无法显示下一个视频。它仍将显示播放的阵列列表中的第一个视频。我也尝试过使用localStorage.setItem("video_increment", video_increment);

因此，我想请求帮助，我在现有代码中遗漏了什么。

Answer 1

我将您的代码更改为实际使用localStorage，以便在重新加载后不会丢失当前索引：

var videoList = ["lib/video/A.mp4", "lib/video/B.mp4", "lib/video/C.mp4", "lib/video/D.mp4", "lib/video/E.mp4", "lib/video/F.mp4", ];
// Retrieve last index from localStorage. We parse it to integer, 
// since values are serialized in strings when stored in localStorage
var videoIndex = parseInt(localStorage.getItem('currentIndex')) || 0;

function StartTest() {
  $('#C_Main').fadeOut();
  //play fixed sequence "random" video
  $('#Chl_Selection').fadeIn();

  $("#Chl_Selection_Video").jPlayer({
    ready: function() {
      //console.log("currentPlaying " + videoList[videoIndex]);
      $("#Chl_Selection_Video").jPlayer("setMedia", {
        m4v: videoList[videoIndex]
      }).jPlayer("play");
    },
    ended: function() {
      //after video has played, increment the videoIndex
      videoIndex++;
      if (videoIndex >= videoList.length) {
        //console.log("Next" + videoIndex);
        videoIndex = 0;
      }
      console.log("videoIndex" + videoIndex);

      //set local storage
      localStorage.setItem("currentIndex", videoIndex);

      //Display Thank you page
      $('#Chl_Selection').fadeOut();
      $('#Chl_ThankYou').fadeIn(function() {
        setTimeout(function() {
          location.reload();
        }, 5000);
      });
    },
    swfPath: "javascript",
    muted: true,
    loop: true,
    supplied: "webmv, ogv, m4v",
    size: {
      width: 1080,
      height: 1920
    }
  });
}

无法播放从阵列开始的视频

1 个答案: