Всем добрый день, проблема такова: моя цель сделать синхронизацию ползунка и нынешнее время видео (тобиж если видео уже идёт 10 секунд, то ползунок меняет value). Вроде всё хорошо, при запуске видео ползунок двигается относительно видео. Только вот, если двинуть ползунок, то он перестает следовать за видео, хотя функция работает, в setAttribute('value', String(wrapperVideo.currentTime.toFixed())) передается нынешнее время видеоролика, но почему то атрибут value не меняется. Не подскажете, с чем это может быть связано?
JS
const btnOk = document.querySelector('.btn-ok');
const btnStop = document.querySelector('.btn-stop');
const wrapperVideo = document.getElementById('fon');
const lineage = document.getElementById('fader');
let timerId;
btnOk.addEventListener('click',function(){
wrapperVideo.play();
timerId = setInterval(tick, 1000);
});
btnStop.addEventListener('click',function(){
wrapperVideo.pause();
clearInterval(timerId);
});
function tick(){
lineage.setAttribute('value', String(wrapperVideo.currentTime.toFixed()));
console.log(lineage.setAttribute('value', String(wrapperVideo.currentTime.toFixed())));
console.log(String(wrapperVideo.currentTime.toFixed()));
};
function sliderChangeFunc(){
wrapperVideo.currentTime = lineage.value;
lineage.setAttribute('value', String(wrapperVideo.currentTime.toFixed()));
}
lineage.addEventListener("input", sliderChangeFunc);
function starts(argument) {
lineage.setAttribute('max', wrapperVideo.duration);
}
window.onload = starts;
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="TecMD">
<meta name="description" content="ddd">
<link rel="stylesheet" type="text/css" href="player.css">
<title>Главная страница</title>
</head>
<body id = "body">
<video class='video-player' id="fon"><source src="test_video.mp4" type="video/mp4"></video>
<div class="btn-ok" id="but">Click Play</div>
<div class="btn-stop" id="but">Click Stop</div>
<div class="slider">
<input type="range" id="fader" min="0" max="100" value="0" step="1">
</div>
<script src="player.js"></script>
</body>
</html>
Средний