Question

假设网页上有一个媒体（视频）播放器。

在Flash上，

<button name="test" onclick="alert(Math.floor(jwplayer().getPosition())+ 'secs elapsed!');">elapsed time</button>

此代码显示视频的已用时间

在HTML5上，

<button name="test" onclick="alert(Math.floor(document.getElementById('video').currentTime) + 'secs elapsed!');">elapsed time</button>

此代码还显示视频的已用时间

我正在考虑存储所有评论，并且已经过了数据库的时间。

然后，当用户加载页面时，它会自动加载特定视频的所有评论然后它显示每个评论随着时间的流逝（我的图像弹出）

是否可以使用jQuery（或javascript）？如果是这样的话？任何人都可以告诉我如何轻松实现这一点。

如果有这样的评论

5秒钟“你好！5秒过去了”
20秒“你好！20秒过去了”
35秒“你好！35秒过去了”
35秒“你好！35秒已经过去了。第2部分”
在60秒时“你好！35秒过去了”

更新：

<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Test</title>
    <script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<meta name="keywords" content="">
<meta name="description" content="">

<script type="text/javascript">
jQuery(document).ready(function () {
    var comments = [{'time':'5','message':'hello! 5 secs has past'},{'time':'10','message':'hello! 10 secs has past'},{'time':'30','message':'hello! 15 secs has past'}];

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

    function showComments(time){
        var comments = findComments(time);
        $.each(comments,function(i,comment){
            alert(comment.message);
        });
    }

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

</head>


<body>

<video id='video'
      controls preload='none' 
      poster="http://media.w3.org/2010/05/sintel/poster.png">
      <source id='mp4'
        src="http://media.w3.org/2010/05/sintel/trailer.mp4"
        type='video/mp4'>
      <source id='webm'
        src="http://media.w3.org/2010/05/sintel/trailer.webm"
        type='video/webm'>
      <source id='ogv'
        src="http://media.w3.org/2010/05/sintel/trailer.ogv"
        type='video/ogg'>
      <p>Your user agent does not support the HTML5 Video element.</p>
    </video>


</body></html>

Answer 1

如果每个视频没有很多条评论，请立即从数据库加载所有评论...将其放入javascript数组中...然后使用计时器逐个显示

要将数据库查询结果放在javascript数组中，您可以实现ajax。

如果每个视频有很多评论，那么每次定时器事件触发时都必须进行ajax调用以检索单个注释，然后显示它。

对于javascript和jquery过程实际上是一样的，但在jquery中，ajax代码要简单得多。

Answer 2

以下是一些可以作为起点的示例代码，它使用的是HTML5 Javascript API

<强> Demo fiddle

//Store your comments in an array as objects with time and message
var comments = [{'time':'5','message':'hello! 5 secs has past'},{'time':'10','message':'hello! 10 secs has past'},{'time':'15','message':'hello! 15 secs has past'}];

//Bind to the timeupdate event
$('#video').on('timeupdate',function(e){
    showComments(this.currentTime);
});

//show your comments
function showComments(time){
    var comments = findComments(time);
    $.each(comments,function(i,comment){
        alert(comment.message);
    });
}

//find all comments for the current time
function findComments(time){
    return $.grep(comments, function(item){
      return item.time == time.toFixed(); //Remove decimals to check for whole seconds
    });
}

您可以详细了解视频API here

此外，我应该注意timeupdate事件在不同的浏览器中以不同的时间间隔触发，请查看this question以获取更多信息。

是否有可能在经过的时间过去时显示检索到的评论？

2 个答案: