如何实现点击剧集按钮切换视频？我的代码无法生效

我搭建了一个流媒体网站，目前遇到剧集按钮切换视频的问题，每个剧集按钮都有独立ID。

我的HTML代码 #

<div class="episode">
  <div class="play-btn">
    <a href="#">
      <button id="mybtn1" onclick="playEpisode(1)" type="button" name="button">
        <div class="play">
          <svg viewBox="0 0 26 26">
            <polygon class="play-btn-svg" points="9.33 6.69 9.33 19.39 19.3 13.04 9.33 6.69" />
          </svg>
        </div>
        <span>1</span> Underworld
      </button>
    </a>
  </div>
</div>

<div class="Videocontainer">
  <div class="Videowindow">
    <video class="myvideo" autoplay poster="Sword art Online\SAO S1\play.jpg" controls >
      <source src="Sword art Online\SAO S1\[HorribleSubs] Sword Art Online - Alicization - 01 [1080p].mkv" class="videoSource">
    </video>
  </div>
</div>

尝试的JavaScript代码（无法正常运行） #

var myVideo = document.querySelectorAll("Videowindow");
var btnVideo1 = document.getElementById("mybtn1");
var btnVideo2 = document.getElementById("mybtn2");
var btnVideo3 = document.getElementById("mybtn3");

// Add event listeners for the "click" event on the buttons
btnVideo1.addEventListener("click", function() {
// Update the video source with video 1
myVideo.src = "Sword art Online\\SAO S1\[HorribleSubs\] Sword Art Online - Alicization - 01 \[1080p\].mkv";
myVideo.load(); // Load the new video source
});

btnVideo2.addEventListener("click", function() {
// Update the video source with video 2
myVideo.src = "Sword art Online\\SAO S1\[HorribleSubs\] Sword Art Online - Alicization - 02 \[1080p\].mkv";
myVideo.load(); // Load the new video source
});

btnVideo3.addEventListener("click", function() {
// Update the video source with video 3
myVideo.src = "Sword art Online\\SAO S1\[HorribleSubs\] Sword Art Online - Alicization - 03 \[1080p\].mkv";
myVideo.load(); // Load the new video source
});

问题分析与修复方案 #

核心错误点

1. 选择器错误：document.querySelectorAll("Videowindow") 缺少类选择器的.，且应该直接选中<video>元素而非外层容器；querySelectorAll返回节点列表，无法直接访问src属性。
2. 事件冲突：按钮已有onclick属性，又通过addEventListener绑定事件，可能导致逻辑冲突。
3. 路径转义冗余：JS中路径无需对[]额外转义，重复转义会导致路径无效。
4. 未阻止<a>默认行为：外层<a href="#">会触发页面跳转，打断视频切换逻辑。

修正后的代码

HTML（优化按钮结构）

<div class="episode">
  <div class="play-btn">
    <a href="#">
      <button id="mybtn1" type="button" name="button">
        <div class="play">
          <svg viewBox="0 0 26 26">
            <polygon class="play-btn-svg" points="9.33 6.69 9.33 19.39 19.3 13.04 9.33 6.69" />
          </svg>
        </div>
        <span>1</span> Underworld
      </button>
    </a>
  </div>
  <div class="play-btn">
    <a href="#">
      <button id="mybtn2" type="button" name="button">
        <div class="play">
          <svg viewBox="0 0 26 26">
            <polygon class="play-btn-svg" points="9.33 6.69 9.33 19.39 19.3 13.04 9.33 6.69" />
          </svg>
        </div>
        <span>2</span> xxx
      </button>
    </a>
  </div>
  <div class="play-btn">
    <a href="#">
      <button id="mybtn3" type="button" name="button">
        <div class="play">
          <svg viewBox="0 0 26 26">
            <polygon class="play-btn-svg" points="9.33 6.69 9.33 19.39 19.3 13.04 9.33 6.69" />
          </svg>
        </div>
        <span>3</span> xxx
      </button>
    </a>
  </div>
</div>

<div class="Videocontainer">
  <div class="Videowindow">
    <video class="myvideo" autoplay poster="Sword art Online\SAO S1\play.jpg" controls >
      <source src="Sword art Online\SAO S1\[HorribleSubs] Sword Art Online - Alicization - 01 [1080p].mkv" class="videoSource">
    </video>
  </div>
</div>

JavaScript（修复逻辑）

// 直接选中目标video元素
const myVideo = document.querySelector(".myvideo");
// 获取所有剧集按钮
const btnVideo1 = document.getElementById("mybtn1");
const btnVideo2 = document.getElementById("mybtn2");
const btnVideo3 = document.getElementById("mybtn3");

// 封装视频切换函数，减少重复代码
function switchVideo(episodeNum) {
  // 拼接对应剧集的视频路径
  const videoSrc = `Sword art Online\\SAO S1\\[HorribleSubs] Sword Art Online - Alicization - ${episodeNum.toString().padStart(2, '0')} [1080p].mkv`;
  // 更新source标签的src属性
  const sourceElement = myVideo.querySelector(".videoSource");
  sourceElement.src = videoSrc;
  // 重新加载并播放视频
  myVideo.load();
  myVideo.play();
}

// 绑定按钮点击事件，同时阻止a标签跳转
btnVideo1.addEventListener("click", function(e) {
  e.preventDefault();
  switchVideo(1);
});

btnVideo2.addEventListener("click", function(e) {
  e.preventDefault();
  switchVideo(2);
});

btnVideo3.addEventListener("click", function(e) {
  e.preventDefault();
  switchVideo(3);
});

额外说明

• 封装switchVideo函数后，新增剧集只需复制按钮结构并调用函数传入对应集数即可。
• 修改<source>的src属性而非直接修改video的src，兼容性更好。
• padStart(2, '0')用于统一集数字符格式（如1转为01），匹配文件名规则。

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