XML file does't load when HTML5 video plays

Question

I should be able to loads the related XML file and displays the content of the XML file as the video plays back.

What am I missing?

DEMO

JAVSCRIPT

var XML_PATH = "http://www.adjustyourset.tv/interview/cuepoints.xml";

var cuepoints=new Array();

$(document).ready(function() {
    loadXML();
});

function loadXML()
{
    $.ajax({
            type: "GET",
            url: XML_PATH,
            dataType: "xml",
            success: function onXMLloaded(xml) 
            {
                // set cuepoints
                cuepoints=$(xml).find("cuepoints");

                // loop for each cuepoint
                $(xml).find('cuepoint').each(function loopingItems(value)
                {   
                    // create an object
                    var obj={
                    timeStamp:$(this).find("timeStamp").text(),
                    desc:$(this).find("desc").text(),
                    thumbLink:$(this).find("thumbLink").text(),
                    price:$(this).find("price").text()};
                    cuepoints.push(obj);

                    $("#mycustomscroll").append('<ul>');
                    $("#mycustomscroll").append('<li id="item"><strong>'+(value+1)+"</strong><br/><strong>Time Stamp: </strong>"+obj.timeStamp+'</li>');
                });

                // close </ul>
                $("#mycustomscroll").append('</ul>');
                // append li tags
                $("#leftcolumn").append('<li src="'+cuepoints[0].desc+'"> <p src="'+cuepoints[0].thumbLink+'" /></li>');

                $("#price").append(cuepoints[0].price);

            }
    });
}

Answer 1

Nothing is calling init() .

Change

function init() {
    // call loadXML function
    loadXML();
}

to

$(document).ready(function() {
    loadXML();
});

Answer 2

Ok. Now i understood the question. You are able to get the xml from the ajax request but you are not able to parse it properly.

If you are concerned about this piece of code

  $(xml).find('cuepoint').each(function loopingItems(value)
                {    
            // create an object
                    var obj={timeStamp:$(this).find("timeStamp").text(), desc:$(this).find("desc").text(), thumbLink:$(this).find("thumbLink").text(), price:$(this).find("price").text()};
                    cuepoints.push(obj);

                    // append <ul> and timeStamp
                    $("#mycustomscroll").append('<ul>');
                    $("#mycustomscroll").append('<a><li id="item"><strong>'+(value+1)+"</strong><br/><strong>Time Stamp: </strong>"+obj.timeStamp+'</li></a>');
                });

then i suggest you to use this.getAttribute('timeStamp') or $(this).attr('timeStamp') instead of $(this).find("timeStamp").text() , you wont get anything from this because this is an attribute and not an element.