1

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?

0

I had the same problem. You need to reclassify the mediaelement style and script, like it is explained in this post. So just call this funtion, after your ajax call:

function enqueue_mediaelement(){
    wp_enqueue_style( 'wp-mediaelement' );
    wp_enqueue_script( 'wp-mediaelement' );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

If you wanna add your own styles for specific pages (in the following example for page with ID '2'), I would recommend to additionally add your own stylesheet:

function enqueue_mediaelement(){
  if( is_page( '2' ) ) {
    wp_enqueue_style( 'wp-mediaelement' );
    wp_enqueue_style('my-audio-player', get_stylesheet_directory_uri() . '/audio-player-styles.css', array(), null );
  }else{
    wp_enqueue_style( 'wp-mediaelement' );
  }
  wp_enqueue_script('wp-mediaelement');
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

Of course you could do the same with an individual script.

Also this article could be helpful.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.