1

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

在闪存上，

<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>
4

2 回答 2

1

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

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

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

对于 javascript 和 jquery 程序其实是一样的，但是在 jquery ajax 代码要简单很多。

于 2013-08-09T04:55:50.583 回答
1

下面是一些示例代码，您可以将其用作起点，它使用 HTML5 Javascript API

演示小提琴

//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 的更多信息

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

于 2013-08-09T05:51:56.563 回答