hypnotic_monkey
New Member
I got popcorn.js from Popcorn Javascript website. It runs fine with hard coded for start, end, and text. Now I added another functions to get subtitle XML(start, dur, and text) and store into subtitleArray. I replace first text subtitle into firstLine(subtitleArray[0][2]). Then run it, it doesn't display first line but it does display the next line. I think it probably doesn't run all function at the same time or is it something else?\[code\]<html> <head> <title>HTML5 included Javascript....</title> <meta name="description" content="Test" charset="utf-8"></meta> <script src="http://stackoverflow.com/questions/15626090/popcorn.js"></script> <script type="text/javascript"> var subtitleArray = new Array(); //stored all values from XML caption file var firstLine; 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(); var c = document.getElementById('container'); 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"); popcorn.subtitle({ start: 0, end: 3, text: firstLine, // "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/15626090/caption.mp4" type="video/mp4" /> <source src="http://stackoverflow.com/questions/15626090/caption.webm" type="video/webm" /> <source src="http://stackoverflow.com/questions/15626090/caption.ogg" type="video/ogg" /> </video> </div> <div id="text" style="width:980px;height:50px;"></div> <div id="container"></div> </body></html>\[/code\]