Question

随着时间的流逝，它会显示连续的消息但我的代码仅适用于HTML5视频播放器。

如果我想用jwplayer做同样的事情，我该如何修复我的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 with html5 video player

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

使用jwplayer的HTML

<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

问题是你在jwplayer的情况下没有调用showCommetns方法，你需要使用onTime(callbak)选项来做到这一点 - Doc

尝试

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

注意：方法showComments和依赖关系被移动到全局范围，因为它需要通过jwplayer配置在闭包范围之外访问

随着时间的推移，如何显示顺序注释？

1 个答案: