1

我创建了从 XML 获取开始、持续时间和文本的 subtitleArray。现在如何匹配包含循环和 if 语句的视频当前播放时间。如果是这样，它会在网站上打印标题。这是一些代码，

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 回答