我懂你现在的痛点：要做一个移动端的6个等宽视频滑块，让处于屏幕中心的视频自动播放还能放大，可就是没法准确识别哪个滑块在中心，也不知道咋给它加active类。别着急，我给你一套完整的解决方案。

核心思路 #

我们可以通过监听滑块容器的滚动事件，计算每个视频滑块的中心位置和视口中心的距离，找到距离最近的那个——这就是当前聚焦的中心滑块，然后给它打上active标签，同时处理播放和放大效果。

步骤1：补全激活状态的CSS样式 #

先给active类加上放大和平滑过渡的样式，让视觉效果更自然：

/* 激活状态的视频放大效果 */
.element.active video {
  transform: scale(1.2);
  transition: transform 0.3s ease-in-out;
}
/* 非激活状态的过渡动画，保证切换流畅 */
.element video {
  width: 50vw;
  transition: transform 0.3s ease-in-out;
}

你的现有布局没问题，grid-template-columns的设置能保证每个滑块和前后空白区域的宽度适配，继续保留就好。

步骤2：编写中心元素检测的JavaScript逻辑 #

这部分是核心，我们要实现：滚动时自动检测中心元素、切换active类、控制视频播放。直接把这段代码放到你的HTML底部（</body>标签之前）就行：

const container = document.querySelector('.container');
const videoElements = document.querySelectorAll('.element');
let viewportCenter = window.innerWidth / 2;

// 计算单个元素中心与视口中心的距离
function calculateCenterOffset(element) {
  const elementRect = element.getBoundingClientRect();
  const elementCenterX = elementRect.left + elementRect.width / 2;
  return Math.abs(elementCenterX - viewportCenter);
}

// 更新激活元素的核心函数
function updateActiveSlider() {
  let closestSlider = null;
  let minDistance = Infinity;

  // 遍历所有滑块，找到距离视口中心最近的那个
  videoElements.forEach(slider => {
    const distance = calculateCenterOffset(slider);
    if (distance < minDistance) {
      minDistance = distance;
      closestSlider = slider;
    }
  });

  // 移除所有滑块的active类
  videoElements.forEach(slider => slider.classList.remove('active'));
  // 给中心滑块添加active类
  if (closestSlider) {
    closestSlider.classList.add('active');

    // 控制视频播放：先暂停所有视频，再播放当前激活的视频
    videoElements.forEach(slider => {
      const video = slider.querySelector('video');
      if (video) video.pause();
    });
    const activeVideo = closestSlider.querySelector('video');
    if (activeVideo) {
      // 移动端自动播放限制：静音视频可自动播放，带音频的需要用户交互
      activeVideo.play().catch(error => {
        console.log("自动播放失败，请先点击页面激活:", error);
        // 这里可以加个提示，让用户点击页面解锁自动播放
      });
    }
  }
}

// 页面加载时先初始化一次
updateActiveSlider();

// 监听滚动事件，优化性能用requestAnimationFrame
let isTicking = false;
container.addEventListener('scroll', () => {
  if (!isTicking) {
    window.requestAnimationFrame(() => {
      updateActiveSlider();
      isTicking = false;
    });
    isTicking = true;
  }
});

// 窗口大小变化时重新计算视口中心
window.addEventListener('resize', () => {
  viewportCenter = window.innerWidth / 2;
  updateActiveSlider();
});

步骤3：适配移动端自动播放规则 #

移动端浏览器大多禁止无交互的音频视频自动播放，所以建议给视频标签加上muted属性，这样静音视频就能正常自动播放了：

<video width="" height="" controls muted>
  <!-- 你的视频源不变 -->
</video>

如果需要带音频播放，可以在页面加载时加个提示，让用户点击任意位置解锁自动播放权限。

这样一来，当你滑动滑块时，中心的视频会自动加上active类并放大，同时自动播放（静音状态下），完美实现你的需求。

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