문제
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!
https://stackoverflow.com/questions/15637352
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<html>
<head>
<title>HTML5 included Javascript....</title>
<meta name="description" content="Test" charset="utf-8"></meta>
<script src="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[i].getAttribute('start'); // get start time
tempArray[1] = x[i].getAttribute('dur'); // get duration time
tempArray[2] = x[i].childNodes[0].nodeValue; // get text
subtitleArray[i] = 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="caption.mp4" type="video/mp4" />
<source src="caption.webm" type="video/webm" />
<source src="caption.ogg" type="video/ogg" />
</video>
</div>
<div id="text" style="width:980px;height:50px;"></div>
<div id="container"></div>
</body>
</html>
해결책
The problem you have is you are running two different things that depend on each other at different times and you have scope issues with your global variables.
DOMContentLoaded runs before the onload event, so you are making the Ajax call after you are trying to use the returned value before the request is made.
Combine them so they both run at the same time.
다른 팁
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;
