Как одна и та же кнопка может воспроизводить разные видео при каждом нажатии?

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 или кнопка)

MyМысль была в том, чтобы попытаться каким-то образом получить src изображения (что должно быть выполнимо, если щелкнуло изображение, но я не слишком уверен в том, как получить src для обложки DVD, если кнопка нажата. ОттудаЯ думал о том, чтобы иметь простую (но длинную) функцию JavaScript if, чтобы конвертировать каждую обложку DVD в источник нужного видеофайла и просто изменить переменную 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];
    };
});

Надеюсь, это поможет.