0

随着时间的流逝，它会显示顺序消息。
但我的代码仅适用于 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();
        });
    }
});

带有 html5 视频播放器的 HTML

<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>
4

1 回答 1

1

问题是您没有调用 showCommetns 方法jwplayer，您需要使用该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配置在闭包范围之外访问

于 2013-08-21T03:57:44.970 回答