Luke Luke - 3 months ago 14
jQuery Question

video in sequence from array cannot be played

functionality:

A video from a list of videos will be played when a user touches a

<button>
. After the video has finished playing, a 3rd page will
fadeIn()
. And after a delay of 5s, the entire program will perform a refresh via
location.reload();
. After which, another 1 video from a list of video will be played again when a user touches a
<button>
and the entire loop repeats again.

videos that is played will be following the sequence as stated within the array declared

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


hence, the flow is:


  1. when user clicks on a

  2. plays 1st video (video#3) from videolist array

  3. at the end of video(video#3), videoIndex will increment and after a delay of 3s, program refreshes.

  4. user repeats step 1, however, the 2nd video (video#2) from the array will play instead of the 1st video that was played.



What I have done:

I have done a start() that will play the video from the videoarray and increment each videoIndex at the end of the each video that is played.

Code:



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
}
});
}

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

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





Issue:

At this point, I am able to show that the videoIndex increment after the initial video is played. However, I am not able to display the next video when the entire program refreshes. It will still be displaying the first video from the array list that is played.
I have also tried on using
localStorage.setItem("video_increment", video_increment);


Hence, I would like to ask for help, in what am I missing from my existing code.

Answer

I changed your code to actually use the localStorage in order not to lose the current index after reload:

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
    }
  });
}
Comments