点击图片触发onclick切换背景视频的JS代码失效如何解决？

云上老周

2026-9-30

问题排查及修复方案

核心问题清单

路径分隔符错误：所有文件路径使用了Windows系统的反斜杠\，Web标准规定路径分隔符必须使用正斜杠/，且反斜杠在JS字符串中属于转义字符，会导致传入的路径解析错误，无法找到对应视频文件。
更换视频源后未触发加载播放：仅修改src属性只会更新资源地址，浏览器不会自动加载新视频，需要手动调用加载和播放方法。
video标签属性不规范：给video标签重复写了两个class属性，浏览器只会识别第一个，属于无效写法。

修复后的代码

HTML部分

<div id="slide">
     <!-- 合并class属性，路径替换为正斜杠 -->
     <video src="videos/Hair - 43633.mp4" class="source video_item" id="videos" autoplay muted loop controls> </video>
     <ul id="video_navigation">
          <!-- 所有路径的反斜杠统一替换为正斜杠 -->
          <li onclick="videoUrl('videos/Hair - 43633.mp4')"> <img src="image/moon-6616172_1920.jpg" alt="moon" class="img_video_nav" > </li> 
          <li onclick="videoUrl('videos/Road - 81676.mp4')"> <img src="image/background-313415.jpg" alt="moon" class="img_video_nav" > </li> 
          <li onclick="videoUrl('videos/Skyscrapers - 80724.mp4')"> <img src="image/blue-5457731_1920.jpg" alt="moon" class="img_video_nav" > </li> 
          <li onclick="videoUrl('videos/Tunnel - 84938.mp4')"> <img src="image/add-plus-button.png" alt="moon" class="img_video_nav" > </li>
     </ul>
</div>

JS部分

function videoUrl(src_video)
{
    const videoEl = document.querySelector(".source");
    videoEl.src = src_video;
    // 新增加载和播放逻辑
    videoEl.load();
    videoEl.play();
}