Reinitialize Javascript after AJAX refresh-CodePudding

We are using the Easy Video Player in on a WordPress website in combination with FacetWP. This is software we use to filter. This filter is working with AJAX and there is no page refresh after an interaction with the filter, it is done with AJAX.

This is causing problems with the Video player we are using. We think some Javascript is not loaded because of the AJAX refresh with the filter.

We allready know this from FacetWP in order to reinitialize Javascript after interaction with the filter:

facetwp-loaded Event

We also found the PHP script that enqueue the CSS and JS files.

function easy_video_player_enqueue_scripts() {
    if (!is_admin()) {
        $plugin_url = plugins_url('', __FILE__);
        $enable_jquery = get_option('evp_enable_jquery');
        if ($enable_jquery) {
            wp_enqueue_script('jquery');
        }
        //wp_register_style('plyr-css', 'https://cdn.plyr.io/3.6.7/plyr.css');
        wp_register_style('plyr-css', $plugin_url . '/lib/plyr.css');
        wp_enqueue_style('plyr-css');
        //wp_register_script('plyr-js', 'https://cdn.plyr.io/3.6.7/plyr.js');
        wp_register_script('plyr-js', $plugin_url . '/lib/plyr.js');
        wp_enqueue_script('plyr-js');
    }
}

But to be very honest, I can't figure out what I have to load in the FacetWP function in order to re-run the JS to get the player working with filtering.

Anyone can help me a step furder in order to fix this?

EDIT

Got it to work with the help of John:)

const player = Plyr.setup('video', { ratio: '16:9', });

Complete code looks like this:

<script>
document.addEventListener('facetwp-loaded', function() {
    const player = Plyr.setup('video', { ratio: '16:9', });
});
</script>

CodePudding user response：

It´s just a wild guess by looking into the videoplayersource and combine with the facetwp-loaded event.

maybe it works when you add this handler to the bottom of your page (not the content loaded with ajax):

document.addEventListener('facetwp-loaded', function() {
      const players = Plyr.setup('video');
});

if you are getting $ is not defined, try replace $ with jQuery

PS: i just realize that your version of easy-video-player differs from the link i posted above, maybe you should upgrade it to the latest version so it uses flowplayer like in this answer