基于Swup.js点击特定链接执行对应视频切换脚本的问题

核心思路 #

Swup的clickLink事件会传递包含点击元素信息的事件对象，通过其中的delegateTarget属性可精准定位触发点击的元素，结合自定义数据属性就能实现不同点击对应不同视频的切换，同时完全兼容Swup的页面过渡逻辑。

步骤实现 #

1. 给触发元素添加自定义数据属性
   为每个需要触发视频切换的按钮/链接添加data-video-target属性，值对应目标视频容器的类名或ID，方便统一逻辑处理：

<!-- 触发按钮示例 -->
<a href="#" class="video-trigger" data-video-target="video-01">切换到视频01</a>
<a href="#" class="video-trigger" data-video-target="video-02">切换到视频02</a>
<a href="#" class="video-trigger" data-video-target="video-03">切换到视频03</a>

<!-- 视频容器示例 -->
<div class="video-bg video-01 visible-video">
  <video id="video-player-01" loop muted>
    <source src="video-01.mp4" type="video/mp4">
  </video>
</div>
<div class="video-bg video-02">
  <video id="video-player-02" loop muted>
    <source src="video-02.mp4" type="video/mp4">
  </video>
</div>
<div class="video-bg video-03">
  <video id="video-player-03" loop muted>
    <source src="video-03.mp4" type="video/mp4">
  </video>
</div>

2. 重构视频切换函数
   修改videoSwaps函数，通过事件对象的delegateTarget获取点击元素，读取自定义属性值后动态处理对应视频：

function videoSwaps(event) {
  // 获取当前点击的元素
  const clickedEl = event.delegateTarget;
  // 提取自定义属性中的视频标识
  const targetVideo = clickedEl.dataset.videoTarget;

  // 跳过无视频标识的元素点击
  if (!targetVideo) return;

  // 隐藏所有视频并暂停播放
  $('.video-bg').removeClass('visible-video');
  $('.video-bg video').each((_, video) => video.pause());

  // 显示目标视频并启动播放
  $(`.${targetVideo}`).addClass('visible-video');
  $(`#video-player-${targetVideo.split('-')[1]}`)[0].play();
  
  console.log(`已切换到视频：${targetVideo}`);
}

// 绑定Swup的clickLink事件
swup.on('clickLink', videoSwaps);

3. 为什么直接用jQuery click会破坏过渡？
   直接使用$('.btn-video-02').click(...)绑定事件时，会干扰Swup对链接点击的默认拦截逻辑——Swup需要接管点击事件来执行页面过渡流程，原生/jQuery的直接绑定会提前触发操作，打断Swup的过渡生命周期。

额外优化建议 #

• 给视频元素添加muted和loop属性，符合自助终端自动播放需求（现代浏览器要求静音才能自动播放）
• 给visible-video类添加CSS过渡效果，让视频切换更平滑：

.video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.video-bg.visible-video {
  opacity: 1;
  visibility: visible;
}

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