2

在 Firefox 上使用时，我的字幕会在播放时与视频匹配。它在那里，但它没有在视频下方显示字幕文本，但是如果我单击视频进度条或拖动它，就会显示文本，这很奇怪。我希望字幕文本在视频播放时自行显示。任何人都可以帮助我吗？

这里有一个代码，

<html>
    <head>
        <title>HTML5 included Javascript....</title>
        <meta name="description" content="Test" charset="utf-8"></meta>
        <script type="text/javascript">

                var subtitleArray = new Array(); //stored all values from XML caption file

                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()
                {
                    alert("get caption");

                    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


                    }

                    //c.innerHTML = subtitleArray[0][2];

                }

                function load(){

                    alert("run video");

                    getCaption();



                        document.getElementById('caption').addEventListener('play', function (){

                            var t = document.getElementById('timer').innerHTML;

                            video = document.getElementById('caption');

                            //t.innerHTML = video.currentTime;

                            var text = "", cap = "";

                            for( var i = 0; i < subtitleArray.length;i++)
                            {
                                //alert("looping");
                                //var currentTime = video.currentTime();
                                var cueStart = parseFloat(subtitleArray[i][0]);
                                var cueEnd = cueStart + parseFloat(subtitleArray[i][1]);

                                cap = subtitleArray[i][2];

                                if (video.currentTime >= cueStart && video.currentTime <= cueEnd) {
                                   text = cap;   
                                }
                                var t = document.getElementById('timer').innerHTML = text;
                                //t.innerHTML = text;
                            }

                        }, false);  


                }



            window.onload = load;
        </script>
    </head>

    <body>

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

    </body>
</html>

函数 getCaptions() 作用是从 xml 中解析时间和文本并存储到字幕数组中。函数 load() 调用它来运行并将时间与视频时间匹配以显示字幕文本。

4

1 回答 1

0

只要你执行一个javascript函数，屏幕上的html就永远不会刷新。而且您似乎在 load() 函数中运行了一个无限循环。因此问题。

于 2013-06-08T03:59:37.977 回答