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

时间:2016-08-22 03:05:19

标签: javascript jquery arrays html5 video

功能

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

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

中所述的顺序
var videolist=["video#3", "video#2", "video#1", "video#4"];

因此,流程是:

  1. 当用户点击
  2. 播放视频列表
  3. 中的第一个视频(视频#3)
  4. 在视频结尾(视频#3),videoIndex将递增,并在延迟3秒后,程序刷新。
  5. 用户重复步骤1,然而,阵列中的第二个视频(视频#2)将播放,而不是播放的第一个视频。
  6. 我做了什么:

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

    代码:

    &#13;
    &#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;
    &#13;
    &#13;

    问题:

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

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

1 个答案:

答案 0 :(得分:0)

我将您的代码更改为实际使用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
    }
  });
}