Я строю пользовательский видеоплеер в React, и у меня возникают проблемы с выравниванием времени, отображаемого на парижке над панелью прогресса с фактическим временем поиска, используемом при щелчке. Положение.
Время, отображаемое на Hover, выглядит визуально правильно.
Однако, когда пользователь нажимает (используя Onchange), фактическое время поиска точно не совпадает с зависающим временем - обычно на небольшую фракцию второй. /> Пример: < /p>
const handleHoverProgress = (event) => {
if (!isPlayerReady) return;
const rect = inputProgressRef.current.getBoundingClientRect();
const x = event.clientX - rect.left;
const percentage = Math.max(0, Math.min(1, x / rect.width));
const min = parseFloat(inputProgressRef.current.min);
const max = parseFloat(inputProgressRef.current.max);
const step = parseFloat(inputProgressRef.current.step) || 0.001;
let value = min + percentage * (max - min);
value = Math.round(value / step) * step;
value = parseFloat(value);
indicadorRef.current.textContent = formatTime(value * duration);
indicadorRef.current.style.visibility = "visible";
let indicatorX = x - indicadorRef.current.offsetWidth / 2;
indicatorX = Math.max(0, Math.min(rect.width - indicadorRef.current.offsetWidth, indicatorX));
indicadorRef.current.style.left = `${indicatorX}px`;
};
< /code>
ReactPlayer Setup: < /p>
setPlayed(played)}
onDuration={setDuration}
onReady={() => setIsPlayerReady(true)}
controls={false}
width="100%"
height="100%"
progressInterval={100}
/>
< /code>
Ввод диапазона: < /p>
handleSeek(parseFloat(e.target.value))}
className="progress-bar"
/>
< /code>
То, что я попробовал
Сопоставление значения подъема инструментов со значением поиска с использованием одинакового процентного расчета. Обновления. Иногда это выключено на небольшую долю секунды или на одну секунду в зависимости от поведения округления. < /P>
Что я ищу для
Как я могу убедиться, что время, показанное на то, что точно соответствует времени, которое видео ищет, когда пользователь нажимает? или предложения оценены. Спасибо!
Подробнее здесь: https://stackoverflow.com/questions/796 ... ayer-using
