0

我希望字幕在视频上显示 2 行，这意味着当第一个文本出现在第一行时，第一行字幕将移动到第二行。不知何故，它不起作用，因为第一行和第二行打印相同的字幕。负责显示文本的函数是 $("#video").bind('timeupdate',function(){}); “text”变量应显示第一行，“second”变量应显示从第一个文本替换的第二行。我的网站示例可以在链接上看到（在 Firefox 上工作）。视频顶部的字幕是“秒”，视频底部的字幕是“文本”。请帮助，不要介意字幕的位置，我会在功能正常工作后修复它。

这是我的 HTML5/javascript 编码示例，

<html>
    <head>
        <title>HTML5 included Javascript....</title>
        <meta name="description" content="Test" charset="utf-8"></meta>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
        </script>
        <style>
            .container{position:relative;}
            .container video {
                position:absolute;
                z-index:-1;
            }
            .subtitle2 {
                position:absolute;
                width:640px;
                top:400;
                left:120;
                z-index:2000;
                color:white;
                text-shadow:black 2px 2px 6px;
                font-weight:bold;
                font-size:150%;
            }

            .second {
                position:absolute;
                z-index:2000;
                color:white;
                text-shadow:black 2px 2px 6px;
                font-weight:bold;
                font-size:150%;
            }
        </style>
        <script type="text/javascript">

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

                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 2");

                    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];

                }

                $(document).ready(function(){
                    //alert("get caption 1");
                    getCaption();

                    var subtitle2 = document.getElementById('subtitle2');

                    var video = document.getElementById('video');

                    $("#video").bind('play',function(){
                        /*
                        setInterval(function(){

                            //timer.innerHTML = $('#video')[0].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;
                                $( "#second" ).html( prevLineText );
                                console.log( prevLineText );
                                subtitle.innerHTML = text;
                                prevLineText = text;
                                console.log( prevLineText +"\n");
                            }
                        },1);*/
                    });

                    $("#video").bind('timeupdate',function(){
                        //timer2.innerHTML = $('#video')[0].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;   
                                }


                                if ( text != tempText && text != "" ) {
                                console.log( text );
                                console.log(tempText);
                                    $("#second").html(text);
                                }

                                subtitle2.innerHTML = text;
                                tempText = text;
                                console.log( tempText );

                            }
                    });
                });

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

    <body>
        <div id="container" class="container">

                <video id="video" width="930" height="492" controls>
                    <source src="caption.mp4" type="video/mp4">
                    <source src="caption.ogg" type="video/ogg" />
                    <source src="caption.webm" type="video/webm" />
                </video> 
                <div id= "subtitle2" class="subtitle2">
                </div>
                <div id="second" class="second">
                </div>
        </div>
    </body>
</html>
4

1 回答 1

0

我找到了解决方案，这里有一个代码，

var tempText = "", prevText="";

$("#video").bind('timeupdate',function(){


                        var text = "", cap = "";

                            for( var i = 0; i < subtitleArray.length;i++)
                            {

                                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;   
                                }

                                if (tempText != text && text != "") {

                                    prevText = tempText;
                                    $("#second").html(prevText);
                                }

                                subtitle.innerHTML = text;

                                if ( text != "" ) {
                                    tempText = text;
                                }


                            }
                    });
于 2013-04-04T22:00:34.727 回答