html5 커스텀 비디오 문제

function updateProgress() {

seek.value = Math.floor(video.currentTime);

progressBar.value = Math.floor(video.currentTime);

var bufferedEnd = video.buffered.end(video.buffered.length - 1);

var duration =  video.duration;

if (duration > 0) {

document.getElementById('buffered-amount').style.width = ((bufferedEnd / duration)*100) + "%";

}

var duration =  video.duration;

  if (duration > 0) {

document.getElementById('progress-amount').style.width = ((video.currentTime / duration)*100) + "%";

}

}

 

// updateSeekTooltip uses the position of the mouse on the progress bar to

// roughly work out what point in the video the user will skip to if

// the progress bar is clicked at that point

function updateSeekTooltip(event) {

var skipTo = Math.round((event.offsetX / event.target.clientWidth) * parseInt(event.target.getAttribute('max'), 10));

seek.setAttribute('data-seek', skipTo)

var t = formatTime(skipTo);

seekTooltip.textContent = `${t.minutes}:${t.seconds}`;

var rect = video.getBoundingClientRect();

seekTooltip.style.left = `${event.pageX - rect.left}px`;

}

 

// skipAhead jumps to a different point in the video when the progress bar

// is clicked

function skipAhead(event) {

  var skipTo = event.target.dataset.seek;

  video.currentTime = skipTo;

  progressBar.value = skipTo;

  seek.value = skipTo;

}