Change Video Source using Buttons

[mnarlock]

So I've run into some trouble in a larger project so I decided to troubleshoot but creating a smaller project and am still running into issues. Here's the situation. I want to have two buttons (button01 and button02) and one video object (generic_video). Click one button, and the source of the video changes to let's say a local video, somevideo.mp4. Click button02 and the video source changes to someothervideo.mp4. I have the buttons set up and named and a singular video component. My code would look like:

this.Button01.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler()

{

var videoURL = "c:/images-tv.adobe.com/somevideo.mp4";

this.generic_video.on("added", function() {

    $("#generic_video")[0].src=videoURL;

}, this, true);

}

and

this.Button02.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler()

{

var videoURL = "c:/images-tv.adobe.com/someothervideo.mp4";

this.generic_video.on("added", function() {

    $("#generic_video")[0].src=videoURL;

}, this, true);

}

Except, this doesn't work. At all. I run a test and the video box stays empty with nothing in it. No source.

[kglad]

the first error i see is duplicate function names.

then all the "added" code should be removed.  it's too late for that.

[mnarlock]

I've tried with just one button and one video component to see if I could set the button up so that the video starts with no source, then gets a source via the button. 

[kglad]

and?

[mnarlock]

It doesn't do anything. The button doesn't change the source for the video
component.

--
Michael J. Narlock

[kglad]

what code are you using?

[mnarlock]

this.Button01.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler()

{

var videoURL = "c:/images-tv.adobe.com/somevideo.mp4";

this.generic_video.on("added", function() {

    $("#generic_video")[0].src=videoURL;

}, this, true);

}

[kglad]

again, it's too late for the added code.

[mnarlock]

I guess I just don't understand it being late. 

[kglad]

it's added long before you click.  ie, remove the added listener 

[kglad]

this.Button01.addEventListener("click", fl_MouseClickHandler1.bind(this));

function fl_MouseClickHandlerf()

{

var videoURL = "c:/images-tv.adobe.com/somevideo.mp4";

    $("#generic_video")[0].src=videoURL;

}

and

this.Button02.addEventListener("click", fl_MouseClickHandler2.bind(this));

function fl_MouseClickHandler2()

{

var videoURL = "c:/images-tv.adobe.com/someothervideo.mp4";

    $("#generic_video")[0].src=videoURL;

}

[mnarlock]

I'm losing my mind. I have a simple button and a video component. The only code I have is the below and when I test it nothing happens.

this.Button01.addEventListener("click", fl_MouseClickHandler1.bind(this));
function fl_MouseClickHandlerf()
{
var videoURL = "C:\Users\mnarl\Desktop\interactive\videos\HABs_eng.mp4";
$("#generic_video")[0].src=videoURL;
}

[kglad]

your listener function doesn't match your function name.

[mnarlock]

D'oh! I changed it to match and still nothing...

this.Button01.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler()
{
var videoURL = "C:\Users\mnarl\Desktop\interactive\videos\HABs_eng.mp4";
$("#generic_video")[0].src=videoURL;
}

[kglad]

then you videi path/name is incorrect.  open the developer console to confirm.

[mnarlock]

Path is correct. In the dev console src is blank. 

[kglad]

what's the developer console show?  

copy and paste here a screenshot.

[JoãoCésar · Accepted solution]

Hi.

This works for me:

function changeVideoSource()
{
	document.getElementById("yourVideo").src="video.mp4";
}

this.yourButton.on("click", changeVideoSource);

Make sure you have permisssions to load the video from the folder where it is.

I would just place the video in the same folder as the index.html and use a simple relative path.

Regards,

JC