WORDPRESS Audio Player not loading when the conten

Question

I'm creating a wordpress theme. When I load the content using ajax it doesn't apply MediaElements.js to my audio player, so the audio isn't display. I think this is because the MediaElement.js is loaded with wp-footer(), and this new audio is added to the DOM after, and it's not recognized for MediaElement.js.

The same happend with local videos.

How can I resolve this?

Answer 1

I have found that this solves most cases:

You first need to make sure the mediaelement.js scripts are being loaded on all pages (ie even the ones that don't contain media).

functions.php (or similar)

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_style( 'wp-mediaelement' );
}, 100);

Then it should simply be a case of calling this in your JS once your AJAX content has been injected to the page

main.js (or wherever)

$( window.wp.mediaelement.initialize );

Answer 2

You need to reinstantiate the MediaElement object on your newly appended elements.

success: function(response){
    $('video,audio').mediaelementplayer(/* Options */);
}

Alternatively, you can use an Observer to watch and apply.