使用.animate（）[JavaScript]暂停视频进度条

Question

我正在尝试制作自己的视频控件（作为学习练习）。我有以下代码，在按下#play时动画一个进度条：

http://jsfiddle.net/tmyie/TJB7r/

var video = $('video');
var duration;

$('#pause').on('click', function () {
    video[0].pause();
// lets pause the animation too!
});

$('#play').on('click', function () {
    video[0].play();
    duration = video[0].duration;
    $('#timer').animate({
        width: '100%'
    }, duration * 1000);
});

然后慢慢将#timer宽度增加到100%。但是，如果我按暂停，计时器仍然会进行。

暂停.animate()，然后在需要时重新开始的最佳方法是什么？

旁注：我不确定这是否是最好的方法。像setInterval（）这样的东西会更好吗？

任何帮助都会很棒。

Answer 1

你应该使用＆lt;输入类型=“范围”＆gt;

您可以在视频上添加“timeupdate”事件侦听器，并在播放视频时更新输入值。 还要添加一个“更改”事件监听器进行输入，这样您就可以通过搜索栏上的clickng跳过视频等。