Webflow随机视频背景功能失效问题求助

问题说明 #

需在Webflow站点实现随机视频背景，三个视频按以下概率展示：

• Goldfish.mp4：10% 概率
• Black Texture.mp4：45% 概率
• Fish TV.mp4：45% 概率
  现有自定义JS代码无法生效。

原代码核心问题 #

1. 错误使用CSS背景图加载视频：backgroundImage仅能展示静态图片，无法播放视频，必须通过<video>元素的src属性加载视频资源
2. 事件与属性冲突：设置loop = true后，视频循环播放不会触发ended事件，导致无法自动切换下一个视频
3. 加权数组实现效率较低（生成含100个元素的数组）

修复后的代码 #

(function() {
  const videoConfigs = [
    { url: "https://s3.amazonaws.com/webflow-prod-assets/63e4f3713963c5649a7bb382/63f787b42f81b8648e70feda_Goldfish.mp4", probability: 0.1 },
    { url: "https://s3.amazonaws.com/webflow-prod-assets/63e4f3713963c5649a7bb382/63f787fb4b2937100792cf14_Black%20Texture.mp4", probability: 0.45 },
    { url: "https://s3.amazonaws.com/webflow-prod-assets/63e4f3713963c5649a7bb382/63eb5f178ae8e42595f1d524_Fish%20TV.mp4", probability: 0.45 }
  ];

  const backgroundVideo = document.querySelector('.bg-video');

  // 高效加权随机选择方法
  function getRandomVideoUrl() {
    const randomNum = Math.random();
    let cumulativeProbability = 0;
    
    for (const config of videoConfigs) {
      cumulativeProbability += config.probability;
      if (randomNum < cumulativeProbability) {
        return config.url;
      }
    }
    // 兜底返回最后一个视频
    return videoConfigs[videoConfigs.length - 1].url;
  }

  function loadAndPlayRandomVideo() {
    const randomUrl = getRandomVideoUrl();
    // 重置视频源并播放
    backgroundVideo.src = randomUrl;
    backgroundVideo.load();
    backgroundVideo.play().catch(err => {
      // 处理浏览器自动播放限制
      console.log("自动播放被阻止:", err);
    });
  }

  // 页面DOM加载完成后执行
  document.addEventListener('DOMContentLoaded', function() {
    if (backgroundVideo) {
      loadAndPlayRandomVideo();
      // 视频结束后自动切换下一个
      backgroundVideo.addEventListener('ended', loadAndPlayRandomVideo);
    } else {
      console.error("未找到类名为.bg-video的video元素");
    }
  });
})();

关键修复说明 #

• 确保元素类型正确：Webflow中.bg-video必须是<video>组件，而非普通div
• 优化随机逻辑：通过累积概率匹配随机数，无需生成大数组，性能更优
• 修正视频切换逻辑：移除loop属性，监听ended事件触发下一次视频加载
• 增加DOM加载判断：避免因元素未加载完成导致的选择失败问题
• 兼容自动播放限制：处理浏览器禁止自动播放的异常情况

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