video in sequence from array cannot be played
<p><strong><em>functionality:</em></strong></p>

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

<p>videos that is played will be following the sequence as stated within the array declared</p>

<pre><code>var videolist=["video#3", "video#2", "video#1", "video#4"];
</code></pre>

<p>hence, the flow is:</p>

<ol>
<li>when user clicks on a </li>
<li>plays 1st video (video#3) from videolist array</li>
<li>at the end of video(video#3), videoIndex will increment and after a delay of 3s, program refreshes.</li>
<li>user repeats step 1, however, the 2nd video (video#2) from the array will play instead of the 1st video that was played. </li>
</ol>

<p><strong><em>What I have done:</em></strong></p>

<p>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.</p>

<p>Code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><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 &gt;= 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
    }
  });
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.Test {
  position: absolute;
  width: 1080px;
  height: 1740px;
  left: 0px;
  top: 180px;
  z-index: 100;
  outline: 0;
  border: 0;
  background: transparent;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="javascript/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
&lt;script src="javascript/jquery-ui-1.10.3.min.js"&gt;&lt;/script&gt;
&lt;script src="javascript/jplayer.playlist.min.js"&gt;&lt;/script&gt;
&lt;script src="javascript/jquery.jplayer.min.js"&gt;&lt;/script&gt;

&lt;div id="C_Main" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; z-index=1; top:0px; left:0px;"&gt;

  &lt;button class="Test" onclick="StartTest()"&gt;&lt;/button&gt;

  &lt;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;"&gt;

    &lt;!--Video Div--&gt;
    &lt;div id="Chl_Selection_Video" style="position:absolute;"&gt;&lt;/div&gt;

  &lt;/div&gt;

  &lt;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;"&gt;

    &lt;!-- TEST IMAGE --&gt;

    &lt;img id="ThankYou" src="lib/img/Chl_ThankYou.png" style="position:absolute; left:0px; top:0px; width: 1080px; height:1920px;" /&gt;

  &lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><strong><em>Issue:</em></strong></p>

<p>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 <code>localStorage.setItem("video_increment", video_increment);</code></p>

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