AJAX刷新后重新初始化JS，修复WordPress中FacetWP视频播放器问题

我们在WordPress站点同时使用Easy Video Player和FacetWP（一款AJAX驱动的内容过滤工具，交互后无页面刷新）时，出现了视频播放器异常的问题，判断是AJAX刷新后相关JavaScript未重新初始化导致的。

已知FacetWP提供facetwp-loaded事件，可用于在过滤交互完成后重新初始化JS，同时找到了Easy Video Player用于入队CSS和JS的PHP代码：

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');
    }
}

但不清楚在FacetWP相关逻辑中需要加载什么内容，才能让播放器在过滤后恢复正常。

解决方法 #

在John的帮助下已解决问题，核心思路是监听FacetWP的facetwp-loaded事件，在每次过滤完成后重新初始化Plyr播放器：

核心代码片段：

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

完整实现代码：

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

内容的提问来源于stack exchange，提问作者user2812779