Use current time twice in a Plyr instance

[dallanlee]

Plyr seems great so far 👍🏼

I'm hoping to display the current time twice on my player—once on the left of the progress and once, inverted, on the right of the progress.

For example, this screenshot would be showing two current times for a 31 second video 👇🏼

I'm just editing the DOM for this example. If I try to use two 'Current times', only the first instance is recognized and the second remains 00:00.

[siamak-vakili]

Dear friends in the sampotts Please check this out

[siamak-vakili]

Plyr seems great so far 👍🏼

I'm hoping to display the current time twice on my player—once on the left of the progress and once, inverted, on the right of the progress.

For example, this screenshot would be showing two current times for a 31 second video 👇🏼

I'm just editing the DOM for this example. If I try to use two 'Current times', only the first instance is recognized and the second remains 00:00.

You can do it through the custom controls markup, That way :

const controls = `
<div class="plyr__controls" data-audio="x1">
    <div class="plyr__time plyr__time--current" aria-label="Current time">00:00</div>
    <div class="plyr__progress">
        <input data-plyr="seek" type="range" min="0" max="100" step="0.01" value="0" aria-label="Seek">
        <progress class="plyr__progress__buffer" min="0" max="100" value="0">% buffered</progress>
        <span role="tooltip" class="plyr__tooltip">00:00</span>
    </div>
    <div class="plyr__time plyr__time--duration" aria-label="Duration">00:00</div>
    <button type="button" class="plyr__control" aria-label="Play, {title}" data-plyr="play">
        <svg class="icon--pressed" role="presentation">
            <use xlink:href="#plyr-pause"></use>
        </svg>
        <svg class="icon--not-pressed" role="presentation">
            <use xlink:href="#plyr-play"></use>
        </svg>
        <span class="label--pressed plyr__tooltip" role="tooltip">Pause</span>
        <span class="label--not-pressed plyr__tooltip" role="tooltip">Play</span>
    </button>
</div>
`;
const doctors__voice_message = new Plyr('#doctors__voice_message', {controls});

[sampotts]

It's not currently possible. You can display the current-time (which you can click to toggle as a countdown = e.g. -4:30) and duration (fixed, e.g. 4:30) as options but not a secondary current-time that is a countdown. This is something I can include though.

[dallanlee]

It's not currently possible. You can display the current-time (which you can click to toggle as a countdown = e.g. -4:30) and duration (fixed, e.g. 4:30) as options but not a secondary current-time that is a countdown. This is something I can include though.

Thanks for the reply. If it's not difficult to include or if other Plyr users would want it, I would love to see this feature added.

[eBrou]

@sampotts I also have a design to implement that features dual current-time displays (one inverted). I'd love to see this feature added as well. Thanks for all your work on this.