我创建了一个调用 popcorn.js 来显示字幕的事件监听器函数。我还在事件侦听器之外创建与 popcorn.js 无关的函数并声明全局变量数组。我想在事件监听器中打印数组结果(c.innerHTML = subtitleArray[0][2];),但它显示空字符串,即使它已经存储在数组中。请帮忙!
<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>