HTML5循环动画优化：实现当前视频结束后切换动画

先明确要解决的核心问题：

• 点击切换按钮时，必须等当前动画播放完一轮再切换视频
• 提前预加载视频资源，避免切换时出现加载卡顿
• 处理事件冒泡，防止无关元素触发切换逻辑
• 过滤重复点击，只响应最新的用户请求

1. 视频预加载实现 #

提前创建视频元素并加载资源，确保切换时直接可用：

// 预加载所有需要的动画视频
const preloadedVideos = {
  seeding: loadVideo('seeding-orb.mp4'),
  deepSearch: loadVideo('deepsearch-orb.mp4')
};

function loadVideo(src) {
  const video = document.createElement('video');
  video.src = src;
  video.muted = true; // 规避浏览器自动播放限制
  video.preload = 'auto';
  video.loop = false; // 后续手动控制循环逻辑
  return video;
}

2. 点击事件的防抖与冒泡处理 #

用防抖函数过滤重复点击，同时阻止事件冒泡避免误触发：

let debounceTimer = null;
let isPlaying = false; // 标记当前动画是否在播放状态

// 防抖处理：只保留最新的切换请求
function scheduleVideoSwitch(videoType) {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    if (!isPlaying) triggerVideoSwitch(videoType);
  }, 250); // 可根据实际需求调整防抖间隔
}

// 绑定按钮点击事件
document.querySelectorAll('.orb-switch-btn').forEach(btn => {
  btn.addEventListener('click', (e) => {
    e.stopPropagation(); // 阻止事件向上冒泡
    const targetType = btn.dataset.videoType; // 按钮上通过data属性标记对应视频类型
    scheduleVideoSwitch(targetType);
  });
});

3. 等待动画结束后切换视频 #

监听当前视频的ended事件，确保一轮播放完成后再切换：

function triggerVideoSwitch(targetType) {
  isPlaying = true;
  const currentOrbVideo = document.getElementById('orb-animation');

  // 定义切换逻辑
  const doSwitch = () => {
    currentOrbVideo.removeEventListener('ended', doSwitch);
    // 替换为预加载好的视频源
    currentOrbVideo.src = preloadedVideos[targetType].src;
    currentOrbVideo.play();
    // 重新绑定循环播放逻辑
    currentOrbVideo.addEventListener('ended', () => {
      currentOrbVideo.currentTime = 0;
      currentOrbVideo.play();
    });
    isPlaying = false;
  };

  // 如果当前视频正在播放，等它结束再切换；否则直接切换
  if (!currentOrbVideo.paused) {
    currentOrbVideo.addEventListener('ended', doSwitch);
  } else {
    doSwitch();
  }
}

4. 页面初始化默认动画 #

页面加载完成后启动默认的球体循环动画：

document.addEventListener('DOMContentLoaded', () => {
  const defaultVideo = document.getElementById('orb-animation');
  // 绑定循环播放逻辑
  defaultVideo.addEventListener('ended', () => {
    defaultVideo.currentTime = 0;
    defaultVideo.play();
  });
  defaultVideo.play();
});

内容的提问来源于stack exchange，提问作者The Old County