WordPress.org

Make WordPress Core

Opened 3 years ago

Last modified 2 years ago

#36680 new defect (bug)

Audio player with preload="metadata" shows incorrect duration for audio files 1 hour or longer

Reported by: Dexterity Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.5.1
Component: Media Keywords:
Focuses: Cc:
PR Number:

Description

For an audio file that's longer than one hour, using the audio player shortcode with preload="metadata" shows an incorrect duration for the audio when the page loads. The hours are chopped off. So an audio that is 1:07:45 in duration will erroneously display 07:45 upon loading.

Then when the audio file is played, the correct duration pops in, but this causes the volume control to disappear, so the volume can no longer be adjusted while the clip is playing.

Many podcasts are longer than an hour in duration.

For a demonstration of the bug, see audio 16 on this page, which is 1:07:45 in duration:
http://www.stevepavlina.com/audio/

Change History (5)

This ticket was mentioned in Slack in #core-images by joemcgill. View the logs.


3 years ago

#2 @bosbqy
3 years ago

There are more users with this issue, see also (and for more examples): https://wordpress.org/support/topic/wordpress-44-missing-volume-slider

Last edited 3 years ago by bosbqy (previous) (diff)

#3 follow-up: @caercam
2 years ago

Spent some time playing with this issue today, still happens with WordPress 4.8.1. First it seemed to be a known --and solved-- bug from MediaElement.js (See ticket and PR) so I tried overriding the shipped MediaElement version (2.22.0) with the fixed version (2.23.0), but after some fiddling I realized all that's needed for the duration to be displayed properly is the correct time format. Adding this snippet to my site did the job:

<?php
add_filter( 'mejs_settings', 'change_mejs_time_format' );
function change_mejs_time_format( $mejs_settings ) {

        $mejs_settings['timeFormat'] = 'hh:mm:ss';

        return $mejs_settings;
}

It's worth noting that changing the time format applies to all media, so you could end up with 10 second videos with a total time display "00:00:10". @Dexterity if you're OK with that side-effect you can fix your example site.

Last edited 2 years ago by caercam (previous) (diff)

#4 in reply to: ↑ 3 ; follow-up: @Dexterity
2 years ago

Replying to caercam:

add_filter( 'mejs_settings', 'change_mejs_time_format' );

Thanks a bunch! I added the code to my site, and it works nicely.

Just note that you have extra close paren in the add_filter line. I removed it in the quoted version above.

Last edited 2 years ago by Dexterity (previous) (diff)

#5 in reply to: ↑ 4 @caercam
2 years ago

Post edited, thanks! Glad I could help :)

Note: See TracTickets for help on using tickets.