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 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];
    };
});

希望有帮助。

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

1 个答案: