0

DEMOを作成しました。すべてのコメントとその時間を示す表をご覧ください。

ビデオの再生が開始されると、ビデオの経過時間が経過するにつれて、各コメントが表示され始めます。

私が直面している問題は、テーブルの正しい行にジャンプしないことです(テーブルはテキストエリアのように見えます)
。
各コメントがポップアップするたびに、テーブルの一番上の位置に正しい行が表示されるようにします。
スクロールして、テーブル内の現在のコメントの行をたどる必要があります。

どうすればこれを修正できますか? 誰でも私のjsfiddleを変更および更新できますか?

Javascript

var row= '';

jQuery(document).ready(function () {
    var fixedTime = 0;
    $('#video').on('timeupdate',function(e){
        if(this.currentTime.toFixed() != fixedTime){
            showComments(fixedTime);
            fixedTime = this.currentTime.toFixed()
        }  
    });

}); 

var comments = [
    {'time':'10','message':'hello! 10 secs has past'},
    {'time':'11','message':'hello! 11 secs has past'},
    {'time':'10','message':'hello! 10-2 secs has past'},
    {'time':'5','message':'hello! 5 secs has past'},
    {'time':'20','message':'hello! 20 secs has past'},
    {'time':'21','message':'hello! 21 secs has past'},
    {'time':'20','message':'hello! 20-2 secs has past'},
    {'time':'25','message':'hello! 25 secs has past'},
    {'time':'30','message':'hello! 30 secs has past'}
];


function showComments(time){
    var coms = findComments(time);
    if(coms[0]){
            $('.newsticker p').animate({"marginLeft":"400px","opacity":".0"}, 600).fadeOut(100);
            $('.newsticker').append("<p style='margin-left:400px;opacity:0'>"+coms[0].message+"</p>");
            $('.newsticker p').animate({"marginLeft":"0px","opacity":"1"}, 600);

            var row = "tr.comment" + time;
            $("tr").css("background-color","#ffffff");
            jQuery(row).each(function() {
                $(this).css("background","#87cefa");
                $('div#container').animate({
                    scrollTop: jQuery(this).offset().top
                }, 500);
        });  
    }
}

function findComments(time){
    return $.grep(comments, function(item){
      return item.time == time;
    });
}

HTML

    <body>
        <div class="newsticker"> 
        </div>
        <br />
        <br />
        <video id="video" width="320" height="180" controls="controls" autoplay="autoplay" name="media"><source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"></video>
    </body>

<div id="container" style="border:solid 1px;height:70px; width:500px; overflow-y:scroll;">
    <table border="0" height="100" width="400">
    <tr class="comment5">
        <td>00:00:05</td>
        <td>hello! 5 secs has past</td>
    </tr>

    <tr class="comment10">
        <td>00:00:10</td>
        <td>hello! 10 secs has past</td>
    </tr>

    <tr class="comment10">
        <td>00:00:10</td>
        <td>hello! 10-2 secs has past</td>
    </tr>

    <tr class="comment11">
        <td>00:00:11</td>
        <td>hello! 11 secs has past</td>
    </tr>

    <tr class="comment20">
        <td>00:00:20</td>
        <td>hello! 20 secs has past</td>
    </tr>

    <tr class="comment20">
        <td>00:00:20</td>
        <td>hello! 20-2 secs has past</td>
    </tr>

    <tr class="comment21">
        <td>00:00:21</td>
        <td>hello! 21 secs has past</td>
    </tr>

    <tr class="comment25">
        <td>00:00:25</td>
        <td>hello! 25 secs has past</td>
    </tr>

    <tr class="comment30">
        <td>00:00:30</td>
        <td>hello! 30 secs has past</td>
    </tr>
    </table>
</div>

CSS

div.newsticker{
    border:1px solid #666666;
    width:100%;
    height:50px;
}

.newsticker p{
    float:left;
    position:absolute;
}
4

2 に答える 2

2

ここで動作するデモを作成しました: http://jsfiddle.net/9zqhF/17/

修正

  1. Miklos が指摘したように、オフセットが大きすぎます。 jQuery(this)[0].offsetTop.

  2. comments配列が関数に渡されていません。findComments()正しいコンテキストではありません。私がしたことは、コメントを変数として受け入れるように関数を変更することでしたshowComments(fixedTime, comments);:findComments(time, comments);

  3. animate 関数は 2 回呼び出される可能性があり (同時に複数のコメントがあるため)、ジャンプが発生します。ループ インデックスを使用して、最初の反復でのみ実行されるようにすることで、これを修正できます。

    • インデックスを設定するjQuery(row).each(function(index) {

    • 次に、インデックスを使用します。

そのようです：

if(index == 0)
{
    $('div#container').animate({
        scrollTop: jQuery(this)[0].offsetTop
    }, 500);
}
于 2013-08-23T16:04:17.930 に答える