May 2018
Intermediate to advanced
470 pages
13h 54m
English
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 ...
Read now
Unlock full access