00:00:10 から 01:30:00 までの範囲のビデオの長さのスライダーが必要です。ミリ秒単位で期間を取得し、ミリ秒単位で送信する必要があります。noUiSlider.create
2 つの書式設定関数とupdate
イベント ハンドラーを使用して を呼び出しています。
var timeSlider = document.getElementById('timelineranger');
noUiSlider.create(timeSlider, {
start: [10000, 5400000],
connect: true,
behaviour: 'tap-drag',
step: 10000,
range: {
'min': 10000,
'max': 5400000
},
format: {
to: HHMMSSToms,
from: msToHHMMSS
}
});
function msToHHMMSS(value) {
var duration = moment.duration(parseInt(value, 10));
var addZero = function(v) { return (v<10 ? '0' : '') + Math.floor(v); };
var time = addZero(duration.hours()) +
':' + addZero(duration.minutes()) +
':' + addZero(duration.seconds());
return time;
}
function HHMMSSToms(value) {
var a = value.toString().split(':');
var ms = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]) * 1000;
return ms;
}
timeSlider.noUiSlider.on('update', function (values, handle) {
if (handle) {
$('.timeMax').text(values[handle]);
} else {
$('timeMin').text(values[handle]);
}
});
問題は、msToHHMMSS
関数が の値で 3 回呼び出され10000
、次に 5400000
でもう一度呼び出されてから、 の値で呼び出され、エラーをスローすることです: 。10000
HHMMSSToms
undefined
Cannot read property 'split' of undefined
この質問を見てきましたが、最初に言ったように、hh:mm:ss
フォーマットが必要です。