JW Player根据已用时间执行操作

时间:2014-03-08 19:53:45

标签: javascript php video jwplayer

我有一段关于视频的视频和一系列评论。每条评论都有与视频相关的特定时间。例如视频1有3条评论。第二个15分,第二个30分,最后一个评论是第二个45分。

我可以显示所有评论。但是,我希望每个评论都显示在视频的相关时间上。例如,注释1应仅出现在第二个15中,并持续到第二个30,在那里它被第二个注释替换,依此类推。

我正在使用JW Player播放视频,并且可以获取getPosition()函数来获取视频的当前已用时间。它应该是一个简单的JavaScript代码来实现这一点,但不幸的是我是JS的初学者。

我自己的想法是使用onTime函数和每个位置检查服务器中是否有注释,并检索是否存在。如:

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

            });
</script>

但是,这是一项昂贵的功能,会向服务器发送大量请求。

1 个答案:

答案 0 :(得分:3)

好的,我在加载页面时在javascript数组中预加载了注释的最佳解决方案,然后在使用onTime函数时显示它们。这样就不需要在每个onTime帧上发送新请求。由于评论已在客户端提供

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;                     }
       }
);