1

popcorn.jsを呼び出して字幕を表示するイベントリスナー関数を作成しました。また、popcorn.jsに関連しないイベントリスナーの外部で関数を作成し、グローバル変数配列を宣言します。イベントリスナーで配列result（c.innerHTML = subjectArray [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>
4

2 に答える 2

0

次のようなものを試してください

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;
于 2013-03-26T12:58:21.320 に答える
0

あなたが抱えている問題は、異なる時間に相互に依存する2つの異なるものを実行していて、グローバル変数にスコープの問題があることです。

DOMContentLoadedはonloadイベントの前に実行されるため、要求が行われる前に戻り値を使用しようとした後、Ajax呼び出しを行っています。

それらを組み合わせて、両方が同時に実行されるようにします。

于 2013-03-26T12:58:38.173 に答える