Skip to main content
Inspiring
July 12, 2024
Answered

Change Video Source using Buttons

  • July 12, 2024
  • 2 replies
  • 1162 views

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.
    This topic has been closed for replies.
    Correct answer JoãoCésar17023019

    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

    2 replies

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community ExpertCorrect answer
    Community Expert
    July 12, 2024

    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

    kglad
    Community Expert
    Community Expert
    July 12, 2024

    the first error i see is duplicate function names.

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

    mnarlockAuthor
    Inspiring
    July 12, 2024

    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
    Community Expert
    Community Expert
    July 12, 2024

    and?