Try something like
var subtitleArray = new Array(); // stored all values from XML caption file
var firstLine;
function loadXMLDoc(dname, callback) {
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET", dname, false);
xhttp.send();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
callback(xhttp.responseXML);
}
}
}
function getCaption() {
var tempArray = new Array();
var c = document.getElementById('container');
loadXMLDoc("captions.xml", function(captionsDoc) {
var x = captionsDoc.getElementsByTagName('text');
for (var i = 0; i < x.length; i++) {
var tempArray = new Array();
tempArray[0] = x[i].getAttribute('start');
tempArray[1] = x[i].getAttribute('dur');
tempArray[2] = x[i].childNodes[0].nodeValue;
subtitleArray[i] = tempArray;
}
firstLine = subtitleArray[0][2];
c.innerHTML = firstLine;
});
}
document.addEventListener("DOMContentLoaded", function() {
var popcorn = Popcorn("#video");
popcorn.subtitle({
start : 0,
end : 3,
text : "Hello World", // "Hello World" replace to
// subtitleArray[0][2]
target : "text"
}).subtitle({
start : 3,
end : 6,
text : "This is second line",
target : "text"
});
popcorn.play();
}, false);
window.onload = getCaption;