HTML5 video playlist with MobileJQuery will not play first video - html

Question

I have the following HTML5 and Java Script code.
PROBLEM: This code will not display the first video clip at index 0.
The code plays all the remaining video clips (from index 1 on-wards) as normal.
The code is available live at
http://mvl.ecs.soton.ac.uk:8080/JustPlayList.jsp
This code will obviously run in HTML5 enabled browsers.
Any help about how to play the first video clip will be really appreciated.
Many thanks,
<div id="VideoContainer"></div>
<div id="num"></div> <script>
var URLArray = new Array();
URLArray[0] = "/VideoContents/AtomVideo/AtomPart1/AtomPart1C.mp4";
URLArray[1] = "/VideoContents/AtomVideo/AtomPart2/AtomPart2C.mp4";
URLArray[2] = "/VideoContents/AtomVideo/AtomPart4/AtomPart4C.mp4";
URLArray[3] = "/VideoContents/AtomVideo/AtomPart5/AtomPart5C.mp4";
URLArray[4] = "/VideoContents/AtomVideo/AtomPart6/AtomPart6C.mp4";
URLArray[5] = "/VideoContents/AtomVideo/AtomPart7/AtomPart7C.mp4";
</script>
<script>
$(document).ready(function()
{
NextFrag();
});
var index=0;
function NextFrag(){
if (index < URLArray.length)
{
alert("Index Value is :" + index);
$("#VideoContainer").html('<video id="video1" controls autoplay > "<source src= "'+ URLArray[index]+ '" type="video/mp4"></source> </video>' );
$("#num").html('Displaying Part : ' +(index+1) + ' ' );
index++;
$("#video1").bind( "ended", NextFrag);
}
}
</script>

Answer 1

There does not appear to be anything wrong with your code, but I think you are getting a weird interaction with jQuery mobile. So the fix seems to be the following. Wrap your HTML in a <div data-role="page"> to tell jQM that this is a mobile page and then put the code in pageinit instead of document.ready. Here is a working demo: http://jsfiddle.net/ezanker/Ep52A/
<div data-role="page">
<div data-role="content">
<center>
<h1>Test Page</h1><h3>Test Page</h3><br /><br />
<div id="VideoContainer"></div>
<div id="num"></div>
<button>Go to Previous Part</button>
<button>Go to Next Part</button>
</center>
</div>
</div>
Here is the code that calls nextFrag:
var index = 0;
$(document).on("pageinit", function(){
NextFrag();
});
UPDATE: jQM Doc explains the problem: http://view.jquerymobile.com/1.3.2/dist/demos/widgets/pages/
Also Note: If your body contains no data-role="page" divs, jQuery Mobile wraps the entire contents of the body within a page div as explained above. jQuery Mobile is using jQuery's wrapAll() method to do this which looks for any script tags inside the content being wrapped, and loads each script source via XHR. If scripts are present in the body, the browser ends up loading them twice. We therefore strongly recommend that jQuery Mobile documents with scripts in their body also contain a div with data-role="page".
So your script in the page was being loaded twice upon initialization calling NextFrag twice and ending up on the second fragment instead of the first.