Full-Stack React Projects - Second Edition

Played duration

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, as shown in the following screenshot:

To show the time, we can utilize the HTML time element, which takes a datetime value, and add it to the view code in MediaPlayer, as follows:

mern-mediastream/client/media/MediaPlayer.js

<time dateTime={`P${Math.round(duration * played)}S`}>      {format(duration * played)}</time> / <time dateTime={`P${Math.round(duration)}S`}>    {format(duration)}</time>

In the dateTime attribute for these time elements, we provide the total ...