html5 커스텀 비디오 문제 채택완료

</strong></p>

<p>function updateProgress() {</p>

<p>seek.value = Math.floor(video.currentTime);</p>

<p>progressBar.value = Math.floor(video.currentTime);</p>

<p>var bufferedEnd = video.buffered.end(video.buffered.length - 1);</p>

<p>var duration =  video.duration;</p>

<p>if (duration > 0) {</p>

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

<p>}</p>

<p>var duration =  video.duration;</p>

<p>  if (duration > 0) {</p>

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

<p>}</p>

<p>}</p>

<p> </p>

<p>// updateSeekTooltip uses the position of the mouse on the progress bar to</p>

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

<p>// the progress bar is clicked at that point</p>

<p>function updateSeekTooltip(event) {</p>

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

<p>seek.setAttribute('data-seek', skipTo)</p>

<p>var t = formatTime(skipTo);</p>

<p>seekTooltip.textContent = `${t.minutes}:${t.seconds}`;</p>

<p>var rect = video.getBoundingClientRect();</p>

<p>seekTooltip.style.left = `${event.pageX - rect.left}px`;</p>

<p>}</p>

<p> </p>

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

<p>// is clicked</p>

<p>function skipAhead(event) {</p>

<p>  var skipTo = event.target.dataset.seek;</p>

<p>  video.currentTime = skipTo;</p>

<p>  progressBar.value = skipTo;</p>

<p>  seek.value = skipTo;</p>

<p>}</p>

<p><strong>