Plyr 多个玩家悬停时播放并在鼠标移开时暂停

Question

我正在关注此溢出讨论（在悬停时播放多个 Plyr Vimeo 嵌入内容）此解决方案非常适用于嵌入式视频（YouTube、Vimeo 等），遗憾的是不适用于 HTML5 视频。

在 Ajax 查询中，我正在获取视频（视频播放器可以是 HTML、YouTube、Vimeo 或其他）在此查询中，嵌入视频（YouTube 和 Vimeo）在悬停时工作，但 HTML 不是。

这是您可以查看的部分屏幕截图https://prnt.sc/lYc5q8kIDvb8 前 3 个 HTML 视频播放器（鼠标悬停时不起作用）和最后 3 个 YouTube 和 Vimeo 播放器（鼠标悬停时工作正常）。

下面是我的 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++; // Do currentPage + 1, because we want to load the next page
    
                    $buttonSelector.text('Loading ...');
    
                    $.ajax({
                        type: 'POST',
                        url: '<?php echo esc_url( admin_url( 'admin-ajax.php' )); ?>',
                        dataType: 'json', // <-- Change dataType from 'html' to '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');
    
                            /**
                             * Video player initialization
                             */
                            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();
                            }
    
                            // Initialize 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>

我在 Ajax 过程中面临的另一个关键问题是 Plyr、masonry 或其他需要在 jQuery “success: function (response)” 中重新初始化，它已经在主 JS 代码中初始化了。只有第一个加载主 js 代码有效，但在单击 Ajax 操作时不起作用。

注意：如果您需要更多信息以便顺利回答过程，请通知我。

Answer 1

在

success

中，您正在为页面中的所有

Plyr

创建新的

.vidiow_player

实例，因此当现有实例已有实例时，它也将适用于现有实例。

同样的情况也发生在

.hover

处理程序上。不确定这是否是问题所在，这可能会造成竞争条件，但请尝试将您的

success

方法更新为

success: function(response) {

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

  /**
   * Video player initialization
   */
  const allPlayerNodes = $('.vidiow_player');
  const newPlayerNodes = allPlayerNodes.filter((index, element) => !element.plyr);

  const new_vidiow_players = newPlayerNodes.map(
    (index, element, arr) => new Plyr(element, {
      debug: true,
      ratio: '16:9',
      volume: 0,
      controls: false,
      muted: true,
      fullscreen: {
        enabled: false
      },
      loop: {
        active: true
      }
    })
  ).get();

  if (new_vidiow_players) {
    new_vidiow_players.forEach((player) =>
      player.on("play", () => {
        const players = getAllVideoPlayers();
        const indexOfCurrentPlayer = players.indexOf(player);
        players
          .filter((p, i) => i !== indexOfCurrentPlayer)
          .forEach((p) => p.pause())
      })
    );
  }

  newPlayerNodes.hover(playVideo, pauseVideo);

  function playVideo(e) {
    const players = getAllVideoPlayers();
    players[allPlayerNodes.index(this)].play();
  }

  function pauseVideo(e) {
    const players = getAllVideoPlayers();
    players[allPlayerNodes.index(this)].pause();
  }

  // Initialize bootstrap tooltip
  $('[data-bs-toggle="tooltip"]').tooltip();
}

并在代码中的某处添加以下辅助函数

function getAllVideoPlayers() {
  return $('.vidiow_player').get().map(element => element.plyr)
}