1

Assuming there is a media(video) player on the web page.

On Flash,

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

This code shows elapsed time of the video

On HTML5,

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

This code also shows elapsed time of the video

I'm thinking of storing all the comments, and it's elapsed time into Database.

Then it automatically loads all comments of particular video when the user load the page.
And then it displays each comment as elapsed time goes by(My image is pop-up)

Is it possible with jQuery(or javascript)? If so how? Can anyone show me how to implement that easily.

if there is a comment like this

  • At 5 secs "hello! 5 secs has past"
  • At 20 secs "hello! 20 secs has past"
  • At 35 secs "hello! 35 secs has past"
  • At 35 secs "hello! 35 secs has past. part2"
  • At 60 secs "hello! 35 secs has past"

UPDATE:

<!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>
MKK
  • 2,713
  • 5
  • 31
  • 51

2 Answers2

1

If you dont have many comments per video, load all the comments at once from the database...put it in a javascript array...and then use a timer to display one by one.

To put the database query results in javascript array you can implement ajax.

If you have many comments per video you have to make an ajax call to retrive a single comment each time the timer event fires, and then show it.

For javascript and jquery procedure is really the same, but in jquery ajax code is lot lot simpler.

Shuaib
  • 779
  • 2
  • 13
  • 47
  • Yes, I know how the process goes. I just wanted to know how to if there's any sample code for that:) – MKK Aug 09 '13 at 05:33
1

Here's some sample code you can use as a starting point, it is using the 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
    });
}

You can read more about the video API here

Also, I should note that the timeupdate event is fired at different intervals in different browsers, check this question for more info.

Community
  • 1
  • 1
omma2289
  • 54,161
  • 8
  • 64
  • 68
  • What if the the event gets fired all 2 seconds (2, 4, 6, 8, ...) and one comment is at second 5? You should save the displayed comments and show **all** comments which have equal or less seconds and are not already displayed. – Fabio Poloni Aug 09 '13 at 06:09
  • Amazing! How many comments at a load would be maximum that you could think of? – MKK Aug 09 '13 at 06:10
  • It seems that alert continues popping up even I closed it! I'm on FireFox. could you hide alert after 1sec has past since it poped? – MKK Aug 09 '13 at 06:12
  • @FabioPoloni the event fires multiple times a second so I guess the real issue would be the amount of resources it will take to search for comments on every interval, @MKK you can check the question I linked at the end for a method to throttle the event callback. Also you should look for a better implementation than using `alert()` that was just an example to show that the comments are being loaded at the right time, you can look for a popup plugin or dynamically append some elements in your page, as I said that code is just the starting point – omma2289 Aug 09 '13 at 06:27
  • @koala_dev Thanks!! one more thing! All I need is jquery, right? I pasted all of your code to html with `` but it won't work:( – MKK Aug 09 '13 at 06:29
  • @MKK did you wrap it inside `$(document).ready(function(){...})`? and yes you only need jQuery plus obviously a browser that supports HTML5 ` – omma2289 Aug 09 '13 at 06:43
  • @koala_dev Yes, indeed I wrapped it! I added UPDATE to my question. Could you see it what's wrong with your copied code? Thanks – MKK Aug 09 '13 at 06:49
  • @MKK that's weird, the code looks fine and I tested the fiddle with your version of jquery and it works well, what are you experiencing exactly? have you checked your browser console for any errors? – omma2289 Aug 09 '13 at 06:53
  • @koala_dev I'm so sorry! I found that! `});` instead of `}` Thanks! Now It's all solved! – MKK Aug 09 '13 at 06:54