Как сделать корректную прокрутку видео в моем длеер?

Question

[pixal]

Всем привет. Я пишу плеер, который берет поток с моего хостинга и воспроизводит его. Идея типа аналог GoogleCast.

Для прокрутки видео я использую

<input type="range" id="progress" class="slider" min="0" max="" value=""   />

Стартует все хорошо. Инпут обновляется корректно, но стоит только перемотать ролик как ползунок замерает и не меняется. Такое ощущение, что он не перерисовается. Подскажите пожалуйста как это исправить, да и оптимизировать код. Так как я полный чайник

var name = document.getElementById("name");
var progress = document.getElementById("progress");
var duration = document.getElementById("duration");
var video = document.getElementById("video");
var currentTime = Math.floor(video.currentTime);




const requestURL = 'https://sherdes-studio.com/tv/stream.php'

function get(a){
    
//alert(a.data.stream)
if (video.src != a.data.stream){
video.src = a.data.stream;
 name.innerHTML=a.data.name;
}
//формирование продолжительности видео
video_durationfgg =video.addEventListener('loadedmetadata', function() {
    var video_duration = Math.floor(video.duration);

});



progress.setAttribute('max', video.duration);

video_duration = Math.floor(video.duration);
sec = video_duration % 60;
    var hr = Math.floor(video_duration / 60 / 60);
    var min = Math.floor( video_duration / 60) - (hr * 60);
    sec = video_duration % 60;

    var video_duration = [
        hr.toString().padStart(2, '0'),
        min.toString().padStart(2, '0'),
        sec.toString().padStart(2, '0')
      ].join(':');
// конец формирование продолжительности видео
var currentTime = Math.floor(video.currentTime);

progress.setAttribute('value', currentTime);
    
    console.log(progress.value)
   
    //currentTime = Math.floor(currentTime);
    sec = currentTime % 60;
    var hr = Math.floor(currentTime / 60 / 60);
    var min = Math.floor( currentTime / 60) - (hr * 60);
    sec = currentTime % 60;

    var currentTime = [
        hr.toString().padStart(2, '0'),
        min.toString().padStart(2, '0'),
        sec.toString().padStart(2, '0')
      ].join(':');
 
      if(sec > 0)
    duration.innerHTML= currentTime+" / "+video_duration;
}


  
  //numberInput.addEventListener('input', handleInputChange)
  function currentUpdate(){
    progress.setAttribute("value", currentTime);
   
    //progress.setAttribute('value', video.currentTime);
    
    
  }
  //querySelector('#progress').addEventListener('input', currentUpdate)
  progress.oninput = () => currentTime = progress.value;




async function sendRequest(method, url, body = null){
    const headers = {
        'Content-Type': 'application/json'
    }
    let response = await fetch(url, {
        method: method,
        mode: 'cors',
        headers: headers
    } )
    return await response.json()
}



data = sendRequest('GET', requestURL)

data.then(data => {
    get(data)
})

function run(){
    data = sendRequest('GET', requestURL)
data.then(data => {
    get(data)
})
}
setInterval(run, 1000);

Примеры кода приветствуются. Заранее благодарен!

Answer 1

[Okujava-script]

Тут такая ошибка: строку

progress.oninput = () => currentTime = progress.value;

следует переписать так:

progress.oninput = () => video.currentTime = progress.value;

И всё будет работать.

Comments

[pixal]

Спасибо, но не работает. Проблема в том, что после изменения положения вручную прогресса, он замирает и все даже значения не меняются. Сколько не обновляй через JS ничего не получится. Просто ломается. А вручную если крутить, то видео переиатывается, а вот сам инпут остается на месте

[Okujava-script]

Консоль что-то пишет? Так у меня было до этого исправленья.

[Okujava-script]

Функция currentUpdate() ни от куда не вызывается. Её содержимое напрашивается переписать так: progress.setAttribute("value", video.currentTime);
Не могу сообразить, от куда её нужно вызывать и почему до первого срабатывания oninput() всё идёт правильно, но после этого ручная перемотка уже не вызывает движение range.