同一个按钮如何在每次点击时播放不同的视频？

Question

我正在尝试开发一个视频播放器，以在一个很酷的界面中播放本地文件，它实际上只有我的家人才会使用，所以代码不必很漂亮或其他任何东西。我基本上有一张装满 DVD 封面的桌子，当单击它们时，每个都应该打开一个带有 Chrome 视频播放器的模式。

我已经设法做到了所有这些，只是我很难得到它，所以可以按下相同的按钮/图像并显示不同的视频文件。基本上这是我在每个表格单元格中得到的内容：

         <th>
            <div class="imageBox">
              <div class="imageInn">
                <img id="standardDVD" src="images/dvdCover1.jpg" alt="Snow">
                    <div class="hoverImg">
                     <img id="buttonPlay" src="images/play.png" alt="play">
                 </div>
              </div>
            </div>
        </th>

然后，我得到了以下 JavaScript 代码，用于在单击时显示模式（我基本上是从 here 获取它并对其进行修改以显示视频）：

var playButton = document.getElementById('buttonPlay');
playButton.onclick = function(){
  modal.style.display = "block";
  document.getElementById("videoModal").src = videoToPlay;
}
var dvdCover = document.getElementById('standardDVD');
dvdCover.onclick = function(){
  modal.style.display = "block";
  document.getElementById("videoModal").src = videoToPlay;
}

（我有两个基本相同的，所以如果单击 DVD 封面或按钮，它就可以工作）

我的想法是尝试以某种方式获取图像的 src（如果是单击的图像，这应该是可行的，但如果按钮是获得的，我不太确定如何获取 dvd 封面 src从那里我想有一个简单（但很长）的 JavaScript if 函数来将每个 DVD 封面转换为正确视频文件的 src，并简单地更改模式中使用的 videoToPlay 变量：

var videoToPlay = "movies/a Movie.mp4";

编辑，因为我认为我不清楚：我有一张桌子，里面有 55 个不同的 DVD 封面，每个都在一个单元格中，每个都有相同的 HTML 代码，除了不同的 dvdCover1.jpg 图像。我想做的是得到它，这样每个人都可以播放正确的视频，而不必为每个人制作新功能。

我意识到这绝对不是最佳实践，任何改进整体设置的建议都值得赞赏 - 尽管我正试图在圣诞节把它放在一起，而我对 HTML 和 CSS 的了解基本上为零，这就是为什么我目前为了简单起见：反正只有 5 人会看到这个，所以最佳实践不一定重要！

Answer 1

一种选择是创建一个包含所有电影路径的数组：

var videosToPlay = [
    "movies/a Movie.mp4",
    "movies/movie a.mp4",
    "movies/a new Movie.mp4"
];

那么你需要像这样获取所有处理程序：

var dvdsCover = document.getElementsByClassName('standard-dvd-class-in-all-table');

然后只需使用匹配索引为所有这些定义点击事件。您的数组必须与 DVD 的完整表顺序匹配：

[...dvdsCover].forEach((dvdCover, index) => {
    dvdCover.onclick = () => {
        modal.style.display = "block";
        document.getElementById("videoModal").src = videosToPlay[index];
    };
});

希望对你有帮助。