实现链接hover切换视频效果，GSAP修改src后视频不刷新如何解决？

AI 小北

2026-10-7

解决方案

核心问题

你只修改了<source>标签的src属性，<video>元素不会自动检测到资源变更，必须手动调用load()方法触发加载流程，才会加载并播放新的视频。另外你给src属性加2秒的过渡是无效的，字符串类型的属性无法做平滑插值动画，切换的过渡效果需要通过控制视频的透明度实现。

修正后代码

// 提前缓存视频DOM元素，避免重复查询
const $video = $('#videoBG');

$('.menu-home a').hover(function () {
  const targetSrc = $(this).attr('data-src');
  // 先把当前视频淡出
  gsap.to($video, 0.4, {
    opacity: 0,
    ease: Power1.easeOut,
    onComplete: function() {
      // 更新视频资源地址
      $video.find('source').attr('src', targetSrc);
      // 手动触发视频加载
      $video[0].load();
      // 新视频加载完成后淡入
      $video[0].addEventListener('loadeddata', function() {
        $video[0].play();
        gsap.to($video, 0.4, {
          opacity: 1,
          ease: Power1.easeIn
        });
      }, { once: true });
    }
  });
});