我从 Popcorn Javascript 网站获取了 popcorn.js。它运行良好，并且对开始、结束和文本进行了硬编码。现在我添加了另一个函数来获取字幕 XML(start、dur 和 text)并存储到 subtitleArray 中。我将第一个文本字幕替换为firstLine(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;
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[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");
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="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>
最佳答案
for (var i = 0; i < subtitleArray.length; i++) {
pop.footnote({
start: subtitleArray[i][0],
end: subtitleArray[i][1],
text: subtitleArray[i][2],
target: "yourDiv'sId"
});
}
关于javascript - 为什么使用 popcorn.js 不显示 XML 字幕？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15626090/