WORDPRESS Audio Player not loading when the content is loaded through Ajax, MediaElement.js no applied

1 Views

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.

Read More

How can I resolve this?

Post Views: 1

Related posts

2 comments

  1. 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.

  2. 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 );

Comments are closed.