In the custom media controls section of the media player, we want to show the time that has already passed, and the total duration of the video in a readable time format:
To show the time, we can utilize the HTML time element.
mern-mediastream/client/media/MediaPlayer.js:
<time dateTime={`P${Math.round(duration * played)}S`}> {this.format(duration * played)}</time> / <time dateTime={`P${Math.round(duration)}S`}> {this.format(duration)}</time>
We will get the duration value for a video by using the onDuration event and then set it to state, so it can be rendered in the time element.
mern-mediastream/client/media/MediaPlayer.js ...
