How to play video when button is pressed

JavaScript
1

Hello,

I’m looking for a way to play multiple videos in same player
when button is pressed for that video. I’m looking for a script
or software to easily do this. The videos will reside on the
server. I have attached a image showing html page layout.
Any help would be greatly appreciated?

Thanks,
Troy

2

Hi,

It’s not too hard - set the path to the video to be played as a data attribute on the respective button:

<button data-video-url="/path/to/video1">Play Video 1</button>
<button data-video-url="/path/to/video2">Play Video 2</button>

Have an empty video tag:

<video id="player" controls></video>

Then attach event handlers so that whenever a button is clicked the video is swapped out and played:

function swapVideo() {
    player.src = this.getAttribute("data-video-url");
    player.load();
    player.play();
}

var videoPlayButtons = document.querySelectorAll("button"),
    player = document.getElementById("player");

for (var i=0; i<videoPlayButtons.length; i++){
    videoPlayButtons[i].addEventListener('click', swapVideo);
}

Here’s a demo

3

Thanks for the info. Can you tell me if all of this code is done using a HTML editor or in FLASH?

4

No problem :slight_smile:

I don’t really understand the question.
The code I posted is simple HTML and JavaScript. No Flash involved.

5