CODEWITHSUNDEEP
javascripthtmlcssweb
Jul
Jul

Reputation: 465

How can the same button play different videos every time it's clicked?

I'm trying to hack together a video player to play local files in a cool interface, it's literally only ever going to be used by my family so the code doesn't have to be beautiful or anything. I've basically got a table full of DVD covers, and when clicked each one of them is supposed to open a modal with a video player for Chrome.

I've managed to do all of this, except I'm struggling to get it so the same button/image can be pressed and a different video file gets shown. Basically this is what I've got inside every table cell:

         <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>

I've then got the following JavaScript code to show the modal when that's clicked (I basically took it from here and modified it to show a video instead):

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

(I've got two basically identical ones so it works if either the DVD cover or the button is clicked)

My thinking was to try and somehow get the src of the image (which should be doable if it's the image that's clicked, but I'm not too sure about how to get the dvd cover src if the button is the one getting clicked. From there I was thinking of having a simple (but long) JavaScript if function to convert each DVD cover to the src of the right video file, and simply change the videoToPlay variable used in the modal:

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

Edit since I don't think I was clear: I have a table with 55 different DVD covers, each in one cell and each with the identical HTML code except with a different dvdCover1.jpg image. What I'm trying to do is get it so each one plays the correct video, without having to make a new function for each.

I realize this is definitely not best practice, and any suggestions to improve the overall setup are appreciated - although I'm trying to get this together for Christmas and my knowledge of HTML and CSS is basically zero which is why I'm currently going for simplicity: only 5 people will ever see this anyway so best practice isn't necessarily important!

Upvotes: 1

Views: 551

Answers (1)

Washington Guedes
Washington Guedes

Reputation: 4365

One option is to create an array with all your movies paths:

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

Then you need to get all handlers like this:

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

Then just define the click event to all of them using the matching index. Your array must match the full table order of DVDs:

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

Hope it helps.

Upvotes: 2

Related Questions