1

Popcorn Javascript Web サイトから 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>
4

1 に答える 1

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

}
于 2013-10-03T14:00:53.180 に答える