Javascript - 单击图像以更改视频播放器的 src

Question

我有一个页面，上面有一个主视频播放器，下面是其他视频的缩略图。

想法是，当您单击缩略图时，Javascript 将视频播放器的 src url 切换为与缩略图关联的 url。

HTML：

        <section class="video-hero">
            <video  controls width="1000" poster="Images/Lonely Universe TN.png">
                <source class="main-video" src="Videos/Lonely Universe 0528.mp4" type="video/mp4">
            </video>
        </section>
        <section class="video-thumbnails">
            <img class="thumbnails" id="lonely-universe" src="Images/Lonely Universe TN.png" alt="Lonely Universe Thumbnail">
            <img class="thumbnails" src="Images/Circles TN.png" alt="Circles Thumbnail">
            <img class="thumbnails" id="adlanta" src="Images/AA TN.png" alt="Adlanta Agency Thumbnail">
            <img class="thumbnails" src="Images/AVA TN.png" alt="AVA Women Thumbnail">
            <img class="thumbnails" src="Images/Rapture TN.png" alt="Everybody's Gone To The Rapture Thumbnail">
            <img class="thumbnails" src="Images/Carrot TN.png" alt="Carrot Fertility Thumbnail">
            <img class="thumbnails" src="Images/Eternal Love TN.png" alt="Eternal Love Thumbnail">
        </section>
    </div>

JavaScript：

const videoOne = "Videos/Lonely Universe 0528.mp4";
const videoThree = "Videos/Adlanta Reel.mp4";

const lonelyUniverse = document.getElementById("lonely-universe");
const adlantaAgency = document.getElementById("adlanta");

lonelyUniverse.addEventListener("click", changeVideo);
adlantaAgency.addEventListener("click", changeVideo);

const mainVideo = document.querySelector(".main-video");

function changeVideo(event) {

  const thumbNail = event.target.id;

  let player;
  if (thumbNail === "lonely-universe") {
    player = videoOne;
  }
  if (thumbNail === "adlanta") {
    player = videoThree;
  }

  mainVideo.src = player;
}

我在检查器中没有收到任何错误，但是当我点击缩略图时没有任何反应。