? ????? ???? ?? ?? ?? ???? ??????. ???? ??? UI, ?? ????? ?? ??? ????? ?? ??????. ?? ??? ?????? ????? ?? ?? ???<progress></progress> ??? ????? (Pankaj Parashar? 2016 CSS-Tricks Post ???) ??? ???? JavaScript? ????? ???? ?????. ??? ???????!

??? ??????. ???? ?? ??? ?? ??? ???????. ???? ? ???????.

HTML

??? html5 :

<video src="http://html5videoformatconverter.com/data/images/happyfit2.mp4"></video>
<figcaption>
  ? <button id="play">?</button>
  <progress id="progress" max="100" value="0">??</progress>
  <label for="progress" id="timer" role="timer"></label>
</figcaption>

???<progress></progress> ??? ???? : max="100" ?? ?? ???? value="0" ? 0% ??? ?????.

CSS ???

?? Pankaj? ??? CSS? ?? ??? ?? ????, ???? ????? ?? ??? ??? ????.

 ?? [??] {
  ?? : ??; / * ??? */
  ?? : ??; / * Firefox */
  ?? : #e52E71; / * ?? */
}

Progress [Value] ::- WebKit-progress-value {
  ?? ??? : ?? ???? (???, #ff8a00, #e52e71);
  ?? : ?? 1s ??;
}

?? [value] ::-Moz-progress-bar {
  ?? ??? : -Moz-linear-gradient (???, #ff8a00, #e52e71);
}

JavaScript : ?? ?????

JavaScript?? ??? ?? ??? ?????.

1. ?? ??? ??? ?? ??? ????? : video.currentTime ? video.duration .
2. ??? ??? ?? : (currentTime / duration) * 100 .
3. ??? ?? ? ?? ???????? : progress.value = roundedPercentage .
4. ?? ?? ?? : ??? ??? ????????.

??? ? ?? ????? ?? ?? ? requestAnimationFrame ?? ? ?? ? ????? (Neal Fennimore? ??? ?? ??).

 const video = document.querySelector ( '???');
const progress = document.getElementById ( 'Progress');
const timer = document.getElementById ( 'Timer');
const button = document.getElementById ( 'Play');

const paused = 'paused';
const playing = '??';
?? = ?? ??;

function progressloop () {
  if (state === ??) {
    progress.value = math.round ((video.currenttime / video.duration) * 100);
    timer.innerhtml = math.round (video.currenttime) '?';
    requestAnimationFrame (ProgressLoop);
  }
}

?? onplay () {
  ?? = ??;
  ProgressLoop ();
  button.innerhtml = "??";
}

?? onpause () {
  ?? = ?? ??;
  button.innerhtml = "?";
}

function onclick () {
  if (state === ?? ??) {
    video.play ();
  } ? ?? {
    video.pause ();
  }
}

video.addeventListener ( 'Play', OnPlay);
video.addeventListener ( 'pause', onpause);
button.addeventListener ( 'Click', OnClick);

? ??? ??? ?? ?? ???? ????? ?????? ???? ??? ?? ??? ??? ?????. ??/?? ?? ??? ???? ???? ????, ? ?? ? requestAnimationFrame ? ??? ???? ??? ?? ??? ?????. ??? ?, ?? ? ?? ??? ??? ?????!

? ??? HTML ???? ?? ???? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!