HTML5，如何匹配视频当前时间与标题数组打印标题在Javascript中

HTML5, how to match video current time with caption array to print caption in Javascript?

本文关键字：标题数组打印 Javascript 时间何匹配视频 HTML5 更新时间：2023-09-26

我创建了从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>

我不知道您是否已经看过它并忽略了它，但我相信Popcorn.js是专门为这种用途设计的:http://popcornjs.org/

我相信他们有HTML5视频与幻灯片、文本等同步的演示。

它在Github上是开源的，有很多演示。