Plyr多播放器悬停播放异常：HTML5视频失效及Ajax重初始化问题

• 参考Stack Overflow上的《Play multiple Plyr Vimeo embeds on hover》方案实现视频悬停播放/移出暂停功能，YouTube、Vimeo等嵌入视频功能正常，但HTML5视频无法触发该功能。
• 通过Ajax请求加载多类型视频（HTML5、YouTube、Vimeo）时，仅前3个HTML5视频无法实现悬停播放，后3个YouTube和Vimeo播放器功能正常。
• Ajax加载更多后，Plyr、Masonry等组件需在jQuery的success回调中重新初始化，但目前仅首次加载时主JS代码生效，加载更多后功能失效。

PHP+JS代码 #

<?php $attr['section_id'] = 1; ?>

<div class="video-load-more-content-<?php echo esc_attr( $attr['section_id'] ); ?> row"></div>

<div class="row">
    <div class="col-12 pagination text-center">
        <a href="javascript:void(0)" class="vidiow-primary" id="load-more-<?php echo esc_attr( $attr['section_id'] ); ?>" data-action="vidiow_load_more<?php echo esc_attr( $attr['section_id'] ); ?>">Load more</a>
    </div>
</div>

<script type="text/javascript">

    ;(function ($) {

        'use strict';

        $(document).ready(function () {

            let paged = 0;
            let $buttonSelector = $('#load-more-<?php echo esc_attr( $attr['section_id'] ); ?>');
            let $content = $('.video-load-more-content-<?php echo esc_attr( $attr['section_id'] ); ?>');

            $buttonSelector.on('click', function(e) {

                if (e.preventDefault) {
                    e.preventDefault();
                }

                paged++; // 加载下一页，当前页码+1

                $buttonSelector.text('Loading ...');

                $.ajax({
                    type: 'POST',
                    url: '<?php echo esc_url( admin_url( 'admin-ajax.php' )); ?>',
                    dataType: 'json', // <-- 将dataType从'html'改为'json'
                    data: {
                        action: $buttonSelector.data('action'),
                        nonce: '<?php echo wp_create_nonce( 'vidiow_ajax_load_more' ); ?>',
                        paged,
                        action_name: $buttonSelector.data('action')
                    },

                    success: function (response) {

                        if(paged >= response.max) {
                            $buttonSelector.hide();
                        }
                        $content.append(response.content);
                        $buttonSelector.text('Load More');

                        /**
                         * 视频播放器初始化
                         */
                        const playerNodes = $('.vidiow_player');
                        const vidiow_player = playerNodes.map(
                            (currentValue, index, arr) => new Plyr( index, {
                                debug: true,
                                ratio: '16:9',
                                volume: 0,
                                controls: false,
                                muted: true,
                                fullscreen: { enabled: false },
                                loop: { active: true }
                            })
                        ).get();

                        if( vidiow_player ){
                            vidiow_player.forEach(( player, index ) =>
                                player.on("play", () =>
                                    vidiow_player
                                    .filter((p, i) => i !== index)
                                    .forEach((p) => p.pause())
                                )
                            );
                        }

                        playerNodes.hover(playVideo, pauseVideo);

                        function playVideo(e){
                            vidiow_player[playerNodes.index(this)].play();
                        }

                        function pauseVideo(e){
                            vidiow_player[playerNodes.index(this)].pause();
                        }

                        // 初始化bootstrap tooltip
                        $('[data-bs-toggle="tooltip"]').tooltip();

                    }
                });
            });

            $buttonSelector.trigger('click');

        });

    })(jQuery);

</script>

HTML代码 #

<!-- Youtube -->
<div class="plyr__video-embed vidiow_player">
    <iframe
        src="https://www.youtube.com/embed/<?php echo esc_attr( $custom_video_url ); ?>?origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1"
        allowfullscreen
        allowtransparency
        allow="autoplay">
    </iframe>
</div>

<!-- HTML 5-->
<video class="vidiow_player" playsinline controls data-poster="img.jpg">
    <source src="video.mp4" type="video/mp4" />
    <source src="video.mp4" type="video/webm" />
</video>

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