每次单击同一按钮如何播放不同的视频？

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代码来显示单击时的模式（我基本上是从此处获取的，然后对其进行了修改以显示视频）：

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 cover 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');

然后，只需使用匹配索引为所有事件定义click事件。 您的阵列必须匹配DVD的完整表顺序：

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

希望能帮助到你。