I created a event listener function that call popcorn.js to display subtitle. I also create functions outside of event listener that are not relate to popcorn.js and declare global variable array. I want to print array result(c.innerHTML = subtitleArray[0][2]
in event listener but it show empty string even though it already stored in array. Please help!\[code\]<html> <head> <title>HTML5 included Javascript....</title> <meta name="description" content="Test" charset="utf-8"></meta> <script src="http://stackoverflow.com/questions/15637352/popcorn.js"></script> <script type="text/javascript"> var subtitleArray = new Array(); //stored all values from XML caption file var firstLine; var c = document.getElementById('container'); function loadXMLDoc(dname) { if (window.XMLHttpRequest) { xhttp=new XMLHttpRequest(); } else { xhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xhttp.open("GET",dname,false); xhttp.send(); return xhttp.responseXML; } function getCaption() { var tempArray = new Array(); captionsDoc = loadXMLDoc("captions.xml"); x=captionsDoc.getElementsByTagName('text'); for(var i=0;i<x.length;i++) { var tempArray = new Array(); tempArray[0] = x.getAttribute('start'); // get start time tempArray[1] = x.getAttribute('dur'); // get duration time tempArray[2] = x.childNodes[0].nodeValue; // get text subtitleArray = tempArray; //put all 3 values in array } //c.innerHTML = subtitleArray[0][2]; firstLine = subtitleArray[0][2]; } document.addEventListener("DOMContentLoaded", function () { var popcorn = Popcorn("#video"); c.innerHTML = subtitleArray[0][2]; 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; </script> </head> <body> <div> <video id="video" width="320" height="240" controls="true" preload="none"> <source src="http://stackoverflow.com/questions/15637352/caption.mp4" type="video/mp4" /> <source src="http://stackoverflow.com/questions/15637352/caption.webm" type="video/webm" /> <source src="http://stackoverflow.com/questions/15637352/caption.ogg" type="video/ogg" /> </video> </div> <div id="text" style="width:980px;height:50px;"></div> <div id="container"></div> </body></html>\[/code\]
in event listener but it show empty string even though it already stored in array. Please help!\[code\]<html> <head> <title>HTML5 included Javascript....</title> <meta name="description" content="Test" charset="utf-8"></meta> <script src="http://stackoverflow.com/questions/15637352/popcorn.js"></script> <script type="text/javascript"> var subtitleArray = new Array(); //stored all values from XML caption file var firstLine; var c = document.getElementById('container'); function loadXMLDoc(dname) { if (window.XMLHttpRequest) { xhttp=new XMLHttpRequest(); } else { xhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xhttp.open("GET",dname,false); xhttp.send(); return xhttp.responseXML; } function getCaption() { var tempArray = new Array(); captionsDoc = loadXMLDoc("captions.xml"); x=captionsDoc.getElementsByTagName('text'); for(var i=0;i<x.length;i++) { var tempArray = new Array(); tempArray[0] = x.getAttribute('start'); // get start time tempArray[1] = x.getAttribute('dur'); // get duration time tempArray[2] = x.childNodes[0].nodeValue; // get text subtitleArray = tempArray; //put all 3 values in array } //c.innerHTML = subtitleArray[0][2]; firstLine = subtitleArray[0][2]; } document.addEventListener("DOMContentLoaded", function () { var popcorn = Popcorn("#video"); c.innerHTML = subtitleArray[0][2]; 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; </script> </head> <body> <div> <video id="video" width="320" height="240" controls="true" preload="none"> <source src="http://stackoverflow.com/questions/15637352/caption.mp4" type="video/mp4" /> <source src="http://stackoverflow.com/questions/15637352/caption.webm" type="video/webm" /> <source src="http://stackoverflow.com/questions/15637352/caption.ogg" type="video/ogg" /> </video> </div> <div id="text" style="width:980px;height:50px;"></div> <div id="container"></div> </body></html>\[/code\]