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