如何实现双控制组拼接背景视频src的功能（避免innerHTML替换）

不用每次点击都用innerHTML替换整个video元素，直接修改视频源的src属性就可以解决问题。核心思路是维护两个分组的选中状态，每次点击任意分组的元素时，更新对应分组的选中值，再拼接路径更新视频源。

具体实现步骤： #

• 定义两个变量，分别存储两组当前选中的ID，初始可以设默认值（比如第一组默认lorem，第二组默认first）
• 给两组元素分别绑定点击事件，点击时更新对应变量的值，然后触发视频更新逻辑
• 写一个统一的视频更新函数，用两个选中的ID拼接成完整路径，直接修改video元素的源，再重新加载播放

代码示例： #

// 初始化两组选中的ID
let group1Selected = 'lorem';
let group2Selected = 'first';

// 获取页面上的video元素和source元素
const videoElem = document.getElementById('video').querySelector('video');
const sourceElem = videoElem.querySelector('source');

// 第一组元素点击事件（lorem/ipsum/dolor/sit）
$('#lorem, #ipsum, #dolor, #sit').click(function() {
  group1Selected = this.id;
  updateVideoSource();
});

// 第二组元素点击事件（first/second/third）
$('#first, #second, #third').click(function() {
  group2Selected = this.id;
  updateVideoSource();
});

// 更新视频源的函数
function updateVideoSource() {
  // 拼接完整的视频路径
  const videoSrc = `site/image/videos/${group1Selected}_${group2Selected}.mp4`;
  // 修改source的src
  sourceElem.src = videoSrc;
  // 重新加载视频并播放
  videoElem.load();
  videoElem.play();
}

补充说明： #

1. 初始页面里不需要用JS生成video元素，直接写好默认的HTML结构即可，比如：

<div id="video">
  <video autoplay muted loop>
    <source src="site/image/videos/lorem_first.mp4">
  </video>
</div>

2. 这种方式只会修改视频源地址，不会替换整个元素，既能保留video的原有属性（autoplay、muted等），性能也更优。

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