Question

我从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>

Answer 1

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"
    });

}

为什么使用popcorn.js不显示XML字幕？

1 个答案: