滚动切换视频功能失效，请求故障排查

嘿，我来帮你排查这个滚动切换视频失效的问题，咱们一步步来分析：

1. 核心问题：修改<source>的src后未触发视频重新加载 #

你现在只修改了<source>标签的src属性，但浏览器不会自动检测这个变化并重新加载视频资源。视频元素需要明确的指令才能更新播放内容。

2. Intersection Observer + Wheel事件的逻辑冲突 #

你的代码里，每当元素进入视口就给window绑定wheel事件，离开时移除，但这个逻辑有两个问题：

• 多次绑定wheel事件会导致重复触发，造成混乱
• 滚动事件的触发和元素是否进入视口的关联逻辑不准确，应该是当某个text-sec元素进入视口时自动切换视频，而不是滚动就触发当前交叉元素的切换

修复方案 #

下面是调整后的完整代码，我会标注关键修改点：

HTML部分（仅调整视频元素的ID）

把id="mainImage"从<source>移到<video>标签上，这样我们可以直接操作视频元素：

<div class="featured-img">
  <video id="mainVideo" class="video-player_video__8GR5s" autoplay loop muted playsinline poster="video1.png">
    <source src="video1.mp4" type="video/mp4" data-component-name="default-render-source" />
  </video>
</div>

JavaScript部分（重写逻辑）

$(document).ready(function () {
  const videoElement = $('#mainVideo');
  const textSections = $('.img-links div.text-sec');
  const options = { threshold: 0.4 };

  // 切换视频的函数
  function switchVideo(targetSection) {
    // 更新active状态
    textSections.removeClass('active');
    $(targetSection).addClass('active');
    
    // 获取新视频地址并更新
    const newVideoSrc = $(targetSection).data('src');
    videoElement.find('source').attr('src', newVideoSrc);
    // 重新加载并播放视频（因为是autoplay muted，所以可以直接调用）
    videoElement[0].load();
    videoElement[0].play();
  }

  // Intersection Observer 逻辑：元素进入视口时自动切换视频
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        switchVideo(entry.target);
      }
    });
  }, options);

  // 给每个text-sec元素添加监听
  textSections.each(function() {
    observer.observe(this);
  });
});

关键修改说明 #

• 把操作对象从<source>改成<video>元素，方便控制视频的加载和播放
• 移除了容易造成冲突的wheel事件绑定，改用Intersection Observer直接在元素进入视口时触发视频切换，逻辑更准确
• 添加了load()和play()方法，确保视频在修改src后能重新加载并自动播放（符合你设置的autoplay muted属性）
• 统一管理所有text-sec元素的监听，避免重复绑定问题

额外注意事项 #

• 确保你的视频文件路径（video1.mp4等）是正确的，浏览器能正常访问到这些资源
• 如果视频切换时出现卡顿，可以考虑预加载视频资源，提升用户体验

内容来源于stack exchange