Делаю свой видеоплеер: при попытке перемотать видео, ползунок возвращается в начало и видео начинается заново. Что не так?

Question

[wolfach]

Код ниже.
JS:

var volumeRange = document.getElementById("volumeRange");

volumeRange.oninput = function() {
  var value = (volumeRange.value - volumeRange.min) / (volumeRange.max - volumeRange.min) * 100;
  volumeRange.style.background = 'linear-gradient(to right, #9776BF 0%, #9776BF ' + value + '%, #ffffff ' + value + '%, #ffffff 100%)';
};

const slider = document.getElementById('volumeRange');
const video = document.getElementById('video');

slider.addEventListener('input', function() {
  video.volume = slider.value / 100;
});

document.addEventListener('DOMContentLoaded', function() {
  var playIcon = document.getElementById('play-screen');
  var video = document.getElementById('video');
  var videoControls = document.getElementById("videoControls");

  playIcon.addEventListener('click', function() {
    if (video.paused) {
      video.style.display = 'block';
      playIcon.style.display = 'none';
      videoControls.style.visibility = "visible";
      video.play();
    }
  });
});

const progressbar = document.getElementById('vp-progressbar');

function updateProgressbar() {
  progressbar.value = (video.currentTime * 100) / video.duration;

  const progress = progressbar.value;
  progressbar.style.background = `linear-gradient(to right, #9776BF 0%, #9776BF ${progress}%, #D9D9D9 ${progress}%, #D9D9D9 100%)`;
}

video.addEventListener('timeupdate', updateProgressbar);

var playButton = document.getElementById('vp-play-img');

function playPause() {
  if (video.paused) {
    video.play();
    playButton.src = '/images/vpause.svg';
  } else {
    video.pause();
    playButton.src = '/images/vplay.svg';
  }
}

video.onplay = function() {
  playButton.src = '/images/vpause.svg';
}

video.onpause = function() {
  playButton.src = '/images/vplay.svg';
}

playButton.addEventListener('click', playPause);


var fullscreenButton = document.getElementById('vp-fullscreen-img');

fullscreenButton.addEventListener('click', function() {
  const vplayer = document.getElementById("vplayer");
  if (vplayer.requestFullscreen) {
    if (!document.fullscreenElement) {
      vplayer.requestFullscreen();
    } else {
      document.exitFullscreen();
    }
  } else if (vplayer.mozRequestFullScreen) {
    if (!document.fullscreenElement) {
      vplayer.mozRequestFullScreen();
    } else {
      document.mozCancelFullScreen();
    }
  } else if (vplayer.webkitRequestFullscreen) {
    if (!document.fullscreenElement) {
      vplayer.webkitRequestFullscreen();
    } else {
      document.webkitExitFullscreen();
    }
  } else {
    alert('Ваш браузер не поддерживает полный экран');
  }
});

const videoPlayer = document.getElementById("vplayer");

videoPlayer.addEventListener("fullscreenchange", function() {
  const videoControls = document.getElementById("videoControls");
  if (document.fullscreenElement === videoPlayer) {
    videoControls.style.visibility = "visible";
  } else {
    videoControls.style.visibility = "visible";
  }
});

progressbar.addEventListener('click', (event) => {
    event.preventDefault();

    const newTime = (event.offsetX / progressbar.offsetWidth) * video.duration;
    console.log('New time:', newTime);

    if (video && progressbar) {
        video.currentTime = newTime;
    } else {
        console.error('Видео или прогрессбар не найден');
    }
});

HTML:

<div id="vplayer" class="videoplayer">
      <video id="video"><source src="{{asset($videos[0]->video)}}" type="video/mp4"></video>
      <div id="play-screen" class="play-screen"><img src="/images/ScreenPlay.svg" alt=""></div>
      <div id="videoControls" class="videoplayer__controls">
      <input type="range" class="vp-progressbar" min="0" max="100" value="0" id="vp-progressbar">
        <button class="vp-play" style="">
          <img id="vp-play-img" src="/images/vplay2.svg" style="" alt="">
        </button>
        <button class="vp-skip" style="">
          <img src="/images/vskip.svg" style="" alt="">
        </button>
        <button class="vp-volume" style="">
          <img src="/images/vvolume.svg" alt="">
        </button>
        <input style="margin-left: 10px;" class="volumeRange" min="0" max="100" value="100" type="range" id="volumeRange">
        <button class="vp-fullscreen" style="">
          <img id="vp-fullscreen-img" src="/images/fullscreen.svg" alt="">
        </button>
    </div>
  </div>
  </div>

CSS:

.videoplayer__controls{
      visibility: hidden;
      justify-content: center;
      position: absolute;
      width: 100%;
      bottom: 0;
      left: 0;
      width: 100%;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      background-color: #3f2264;
      border-bottom-left-radius: 3px;
      border-bottom-right-radius: 3px;
      height: 45px;
    }
    .videoplayer{
      object-fit: cover;
      width: 100%;
      height: 100%;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 10px;
    }
    .videoplayer video{
      border-radius: 10px;
      background-color: #5a318d;
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
    .videoplayer__controls button{
      border: 0px;
    }
    input[type=range].volumeRange{
      -webkit-appearance: none;
      height: 3px;
      background: linear-gradient(to right, #9776BF 0%, #9776BF 100%);
    }
    input[type=range].volumeRange::-webkit-slider-thumb{
      -webkit-appearance: none;
      background: #9776BF;
      background-color: #9776BF;
      color: #9776BF;
      width: 10px;
      height: 10px;
      cursor: pointer;
      border-radius: 20px;
    }

    input[type=range].volumeRange::-moz-range-thumb{
      -webkit-appearance: none;
      background: #9776BF;
      background-color: #9776BF;
      color: #9776BF;
    }

    input[type=range].volumeRange::-ms-thumb{
      -webkit-appearance: none;
      background: #9776BF;
      background-color: #9776BF;
      color: #9776BF;
    }
    .vp-volume:hover +.volumeRange, .volumeRange:hover{
      visibility: visible;
    }
    .volumeRange{
      visibility: hidden;
    }
    .play-screen{
      position: absolute;
      cursor: pointer;
    }
    video::-webkit-media-controls {
      display:none;
    }
    .vp-skip, .vp-volume, .vp-play{
      margin-left: 20px;
    }
    .vp-fullscreen{
      margin-left: auto;
      margin-right: 20px;
    }
    input[type=range].vp-progressbar{
      -webkit-appearance: none;
      height: 5px;
      background: white;
      position: absolute;
      left:0;
      width: 100%;
      bottom: 45;
    }
    input[type=range]::-webkit-slider-thumb.vp-progressbar{
      -webkit-appearance: none;
      background: #9776BF;
      position: absolute;
      width: 10px;
      height: 10px;
      cursor: pointer;
      border-radius: 20px;
    }

Answer 1

[Nikita Komissarov]

Вы не учитываете правильное положение клика относительно прогресс-бара

progressbar.addEventListener('click', (event) => {
    event.preventDefault();

    // Получаем позицию и размеры прогресс-бара
    const rect = progressbar.getBoundingClientRect();
    
    // Вычисляем новое время на основе положения клика
    const newTime = ((event.clientX - rect.left) / rect.width) * video.duration;
    console.log('New time:', newTime);

    if (video && progressbar) {
        video.currentTime = newTime;
    } else {
        console.error('Видео или прогрессбар не найден');
    }
});

Comments

[wolfach]

Доброго вечера, попробовал ваш способ - всё равно не сработало. Заметил ещё такое, если пробую свой код на новом файле, то всё работает. Делаю на Laravel.