MooTools を使用して HTML5 ビデオ プレーヤーを作成しています。プログレス バーは、定期的に更新する「スライド」要素です。
これを行うと、その要素でクリック イベントがキャンセルされます。
スライダーは次のとおりです。
this.options.timeSlider = new Slider(timeProgress, timeKnob, {
range: [0, 100],
steps: 1000,
initialStep: 0,
onChange: function(value) {
this.setProgress(value);
}.bind(this)
});
次に、毎秒定期的に起動される setTime 関数があります。
setTime: function() {
var percentage = this.options.video.currentTime / this.options.video.duration * 100;
if(!isFinite(percentage)) {
percentage = 0;
}
this.options.timeSlider.set(percentage);
}
完全なコードを確認することもできます。ここで見つけることができます: http://j.blck.lv/code/41081i1g3y2v