点击按钮切换ACF字段时如何停止并替换iframe视频？

问题描述 #

使用ACF创建3个含iframe视频的字段，通过3个按钮实现字段切换。当前问题：iframe视频播放时点击切换按钮，视频仍在原字段后台继续播放，无法停止。需求是点击切换按钮时，停止原字段的iframe播放/加载，切换为对应字段的iframe内容。

原始代码 #

JavaScript部分

$(function() {
  var $allItems = $(".food-container > div");
  $(document.body).on("click", "a.button", function(evt) {
    var id = this.id,
      itemId = ".food-container > #item-" + id;
    $allItems.not($(itemId).fadeToggle()).hide();
    if (evt.target.id == 4) {
      $('.burger-disclaimer').toggle();
    } else {
      $('.burger-disclaimer').hide();
    }
  });
});

HTML部分

<div class="food-container">
<div id="item-1" style="display: block;">
    <div class="food"><iframe class="re-if" src="<?php the_field('sv1'); ?>"></iframe></div>
</div>
<div id="item-2" style="display: none;">
       <div class="food"><iframe class="re-if" src="<?php the_field('sv2'); ?>"></iframe></div>
</div>
<div id="item-3" style="display: none;">
        <div class="food"><iframe class="re-if" src="<?php the_field('sv3'); ?>"></iframe></div>
</div>
<a id="1" href="javascript:void(0)" class="button" onclick="pauseVideo()">Server 1<i class="fa fa-caret-right"></i></a>
<a id="2" href="javascript:void(0)" class="button" onclick="pauseVideo()">Server 2<i class="fa fa-caret-right"></i></a>
<a id="3" href="javascript:void(0)" class="button" onclick="pauseVideo()">Server 3<i class="fa fa-caret-right"></i></a>
                <?php 
$link = get_field('download');
if( $link ): ?>
    <a class="button" href="<?php echo esc_url( $link ); ?> target=">Download</a>
<?php endif; ?>
</div>

解决方案 #

核心逻辑是隐藏字段时重置iframe的src属性，强制停止视频播放，同时保存原始src以便下次显示时恢复。

修改后的JavaScript

$(function() {
  var $allItems = $(".food-container > div");
  $(document.body).on("click", "a.button", function(evt) {
    // 只处理服务器切换按钮，跳过下载按钮
    const btnId = $(this).attr('id');
    if (!btnId || !['1','2','3'].includes(btnId)) return;

    const itemId = `.food-container > #item-${btnId}`;

    // 处理所有非目标项：重置iframe并隐藏
    $allItems.not(itemId).each(function() {
      const $iframe = $(this).find('iframe.re-if');
      if ($iframe.length) {
        // 保存原始src到data属性
        if (!$iframe.data('original-src')) {
          $iframe.data('original-src', $iframe.attr('src'));
        }
        // 重置src为空白，停止播放
        $iframe.attr('src', 'about:blank');
      }
      $(this).hide();
    });

    // 处理目标项：恢复iframe原始src并显示
    const $targetItem = $(itemId);
    const $targetIframe = $targetItem.find('iframe.re-if');
    if ($targetIframe.data('original-src')) {
      $targetIframe.attr('src', $targetIframe.data('original-src'));
    }
    $targetItem.fadeIn();

    // 保留原免责声明逻辑
    if (evt.target.id == 4) {
      $('.burger-disclaimer').toggle();
    } else {
      $('.burger-disclaimer').hide();
    }
  });
});

修改后的HTML

<div class="food-container">
  <div id="item-1" style="display: block;">
      <div class="food"><iframe class="re-if" src="<?php the_field('sv1'); ?>"></iframe></div>
  </div>
  <div id="item-2" style="display: none;">
       <div class="food"><iframe class="re-if" src="<?php the_field('sv2'); ?>"></iframe></div>
  </div>
  <div id="item-3" style="display: none;">
        <div class="food"><iframe class="re-if" src="<?php the_field('sv3'); ?>"></iframe></div>
  </div>
  <a id="1" href="javascript:void(0)" class="button">Server 1<i class="fa fa-caret-right"></i></a>
  <a id="2" href="javascript:void(0)" class="button">Server 2<i class="fa fa-caret-right"></i></a>
  <a id="3" href="javascript:void(0)" class="button">Server 3<i class="fa fa-caret-right"></i></a>
  <?php 
  $link = get_field('download');
  if( $link ): ?>
      <a class="button" href="<?php echo esc_url( $link ); ?>" target="_blank">Download</a>
  <?php endif; ?>
</div>

修改说明 #

• 过滤下载按钮，避免触发iframe重置逻辑
• 隐藏非目标字段时，将iframe的src设为about:blank强制停止播放，并用data-original-src保存原始视频地址
• 显示目标字段时，恢复iframe的原始src，重新加载视频内容
• 移除按钮上未定义的pauseVideo() onclick事件，避免控制台报错

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