changing video source using button html

Question

i'm trying to change the video source at the click of a button. The aim is that the user can click the button (ie video title) and the video they want will appear. I'm struggling to get this code to work. Vid 1 appears but non of the buttons are functioning.

Does any one have any thought as to where i'm going wrong? thanks

html

<button onClick="changevid('videos/vid1.mp4')">Video 1</button>
<button onClick="changevid('videos/vid2.mp4')">Video 2</button>
<button onClick="changevid('videos/vid3.mp4')">Video 3</button>

<video controls id="change">
  <source src="videos/Vid1.mp4" type="video/mp4"></source>
</video>

JS

<script language="javascript" type="text/javascript"> 

function changevid(buttonLink) {

document.getElementById('change').src = buttonlink;

}

</script>

Rachel Gallen · Accepted Answer · 2020-01-18 23:15:14Z

2

You need to be careful about spelling/case-sensitivity. You have passed in buttonLink (with a capital L) and you are assigning that value to the src, but spelt with a lowercase l. These things do make a difference! (The same error has been made with vid1.mp4/Vid1.mp4)

Here is a working fiddle (linked to a video on my website - only the first video works). If you click Video 1 button, you will see the video update. However, if you change the uppercase to lowercase in the buttonLink, you will see that the code won't work.

Hope this helps

edited Jan 18, 2020 at 23:15

answered Jan 18, 2020 at 23:02

Rachel Gallen

28.7k22 gold badges77 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alex W Over a year ago

ah thank you for spotting this, it works now! not sure how i missed this

xiscodev · Accepted Answer · 2020-01-18 23:24:30Z

2

Well i think you got a typo there

buttonLink !== buttonlink

Remember javascript is case sensitive.

answered Jan 18, 2020 at 23:24

xiscodev

961 gold badge1 silver badge5 bronze badges

1 Comment

xiscodev Over a year ago

Great it helps, you can integrate linters to your code editor to help you find syntax mistakes.

Harsh Nagarkar · Accepted Answer · 2020-01-18 23:09:44Z

1

You are doing everything correctly expect you are not loading the video. In function do something like

function changevid(buttonLink) {
video = document.getElementById('change');
video.src = buttonLink;
video.load(); //this line is imported to let browsesr fetch new video
}

Read the official w3 documentation with example on https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/load

edited Jan 18, 2020 at 23:09

answered Jan 18, 2020 at 22:56

Harsh Nagarkar

7078 silver badges24 bronze badges

Collectives™ on Stack Overflow

changing video source using button html

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related