Question

我创建了从XML获取开始，持续时间和文本的subtitleArray。现在我如何匹配包含loop和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>

Answer 1

我不知道你是否已经看过它并解雇它，但我相信Popcorn.js是专为此用途而设计的：http://popcornjs.org/

我相信他们已经将HTML5视频演示与幻灯片，文本等同步。

它是Github上的开源软件，有许多演示。

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

1 个答案: