I am using Infinite Scroll on a site that is using a custom styled MediaPlayer Element (using Wordpress' built-in MediaElements.JS).
The style initially loads fine, but once Infinite Scroll loads content from the next page everything breaks. Instead of being loaded in their special MediaPlayerElements structure, they are loaded in plain html5 audio tags making them look completely different.
From what I've researched, it seems that this is do to MediaPlayerElement not being reloaded after Infinite Scroll gets the next page.
This is the live site that the issue is happening on.
I have found similar issues online from some years ago, but none of the solutions seem to fix the issue. Some of the solutions I looked at:
- https://wordpress.org/support/topic/alm-loaded-posts-ignore-wps-mediaelement-js-skin/ (ALM isn't what I am using but I figured it would help guide me to the right answer)
- https://github.com/mediaelement/mediaelement/issues/1155
- https://stackoverflow.com/questions/8114979/trying-to-use-mediaelement-js-alongside-infinite-scroll-plugin-for-wordpress
- https://wordpress.org/support/topic/ajax-pagination-causing-html5-player-to-not-display/
- https://wordpress.org/support/topic/ajax-breaks-the-player-style/ (this is actually the plugin I am using to make the audio posts but it also didn't seem to fix the issue)
- https://stackoverflow.com/questions/35759507/best-way-to-re-initialize-wordpress-mediaelement-after-ajax-load
- Audio Player not loading when the content is loaded through Ajax, MediaElement.js no applied
- https://stackoverflow.com/questions/18310891/mediaelement-js-failing-when-loaded-via-ajax
- Audio Player not loading when the content is loaded through Ajax, MediaElement.js no applied
