1

XML から start、duration、および text を取得する subtitleArray を作成しました。ループとifステートメントを含むビデオの現在の再生時間とどのように一致させることができますか。その場合、キャプションを Web サイトに出力します。ここにいくつかのコードがあります、

function init()
            {
                var subtitleArray = new Array();
                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


                }

                video = document.getElementById("caption");

                video.addEventListener('progress', progressHandler);
                     var text = "", cap = "";

                function progressHandler() {

                for( int i = 0; i < subtitleArray.length;i++)
                {
                    var currentTime = video.getCurrentTime();
                    var cueStart = parseFloat(subtitleArray[i][0]);
                    var cueEnd = cueStart + parseFloat(subtitleArray[i][1]);
                    var diff = cueStart - currentTime;
                                cap = subtitleArray[i][2];

                    if (currentTime >= cueStart && currentTime <= cueEnd) {
                       text = cap.text;   
                    }
                }


                c.innterHTML = text;



            }
            window.onload = init;
        </script>
    </head>

    <body>
        <video id="caption" width="320" height="240" controls>
            <source src="caption.mp4" type="video/mp4">
        </video>
        <div id="container">
        </div>
    </body>
4

1 に答える 1

0

あなたがすでにそれを見て無視したかどうかはわかりませんが、Popcorn.js はこの用途のために特別に設計されたと思います: http://popcornjs.org/

スライド デッキやテキストなどと同期されている HTML5 ビデオのデモがあると思います。

Github のオープン ソースであり、多くのデモがあります。

于 2013-03-20T12:59:35.973 に答える