Comment afficher des commentaires séquentiels en fonction du temps écoulé?

Question

Affiche des messages séquentiels en fonction du temps écoulé.
Mais mon code ne fonctionne que pour les lecteurs vidéo HTML5.

Si je voudrais faire la même chose avec jwplayer, comment puis-je réparer mon javascript ??

javascript

<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! 30 secs has past'}]; 

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

    function showComments(time){ 
     var comments = findComments(time); 
     $.each(comments,function(i,comment){ 
      $('p').text(comment.message); 
      $('p').show().delay(5000).fadeOut(); 
     }); 
    } 

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

HTML avec lecteur vidéo html5

<video id="video" controls="controls" autoplay="autoplay" name="media"><source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"></video> 

HTML avec jwplayer

<script type="text/javascript"> 
    jwplayer("myElement").setup({ 
     file: "http://media.w3.org/2010/05/sintel/trailer.mp4", 
     title: "test", 
     height: 400, 
     width: 600, 
     autostart: true, 
     autoplay: true, 
    }); 
</script> 

Answer 1

Le problème est que vous n'êtes pas appeler la méthode showCommetns en cas de jwplayer, vous devez utiliser l'option onTime(callbak) pour le faire - Doc

Essayez

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

var comments = [{'time':'5','message':'hello! 5 secs has past'},{'time':'10','message':'hello! 10 secs has past'},{'time':'30','message':'hello! 30 secs has past'}]; 
function showComments(time){ 
    var comments = findComments(time); 
    $.each(comments,function(i,comment){ 
     $('p').text(comment.message); 
     $('p').show().delay(5000).fadeOut(); 
    }); 
} 

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

jwplayer("myElement").setup({ 
    file: "http://media.w3.org/2010/05/sintel/trailer.mp4", 
    title: "test", 
    height: 400, 
    width: 600, 
    autostart: true, 
    autoplay: true 
}); 

jwplayer("myElement").onTime(function(time){ 
    console.log('time:' + time) 
    showComments(Math.round(time.duration)); 
}) 

Note: La méthode showComments et les dépendances sont déplacés au niveau mondial scope car il doit être accessible en dehors de la portée de fermeture par jwplayer configuration