0

これは私の現在のコードです。<p>これにより、すべてのコメントが読み込まれ、ビデオの時間が経過するにつれてコメントが表示されます。

スタイルnewstickerはボーダーラインのある正方形です。

その中にコメントを表示したいのですが、スライドインしてからスライドアウトします。ここのようにhttp://spreadthesource.com/sandbox/featurify/

どうすればそれを可能にできますか？メディアのonPlayで毎秒
コンテンツを更新するのがポイントです。 そのため、読み込まれたコメントはスライド インし、そこに 5 秒間留まる必要があり、スライド アウトして消えます。 <p>

jsfiddleでDEMOを作りました。

誰でもコードを教えてください。

Javascript

jQuery(document).ready(function () {

    $('#video').on('timeupdate',function(e){
        showComments(this.currentTime);
    });

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


function showComments(time){
    var comments = findComments(time);
    $.each(comments,function(i,comment){
        $('p#newsticker').text(comment.message);

        // Show for 5 seconds, then hide the `p` element.
        $('p#newsticker').show().delay(2000).fadeOut();
    });
}

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

HTML

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

CSS

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

1 に答える 1

1 
jQuery(document).ready(function () {
    var counter=5;
    $('#video').on('timeupdate',function(e){
        if(this.currentTime > counter){
            showComments(this.currentTime);
            counter+=5; // for updating the comment every after 5 seconds.
        }    
    });

}); 
var comments = [{'time':'10','message':'hello! 10 secs has past'},{'time':'15','message':'hello! 15 secs has past'},{'time':'5','message':'hello! 5 secs has past'},{'time':'20','message':'hello! 20 secs has past'}];


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

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

コードを変更しました。これがうまくいくことを願っています。ここからフィドルを見ることができます。http://jsfiddle.net/Aveendra/m5tt9/

于 2013-08-23T07:25:15.920 に答える