JW Player do action based on elapsed time

Question

I have a video and series of comments on the video. Each comment has a specific time associated with the video. For example video 1 has 3 comments. one in second 15, another in second 30, and the last comment is in second 45.

I can show all the comments. However, instead I want each comment to be shown on its associated time of the video. For example, comment 1 should only be appeared in second 15 and lasts until second 30 where it is replaced by second comment and so on.

I'm using JW Player to play the video and can get getPosition() function to get the current elapsed time of the video. It should be a simple JavaScript code to achieve this but unfortunately I'm so beginner with JS.

My own idea to achieve this is to use onTime function and for each position check if there is a comment in the server or not, and retrieve if there is. As in:

<script>
      jwplayer("container1").onTime(
           function(event) { 
            {
               var comment = get_comment_of(event.position);
               setText(comment);
               function setText(text) {
                   document.getElementById("message").innerHTML = text;
               }

            });
</script>

However, this is an expensive function and will send huge number of requests to the server.

Answer 1

Ok, the best solution I have preloaded the comments in a javascript array when the page is loaded, then show them when they occur using onTime function. This way there is no need to send a new request on on every onTime frame. As the comments are already available on the client side

var timeArray = <?php echo json_encode($timeArray) ?>;
var commentArray = <?php echo json_encode($commentArray) ?>;
jwplayer("container1").onTime(
    function(event) {
       for (var i = 0; i < timeArray.length; i++)
       {
           var time = timeArray[i]
           var comment = commentArray[i];
           if (event.position >= time) {
               setText(comment);
           }
       }


       function setText(text) {
           document.getElementById("message").innerHTML = text;                     }
       }
);