Changing the value of src attribute inside video source tag

JavaScript
1

my html

<body>
<div id="wrapper">
	<video width="320" height="240" controls>
	  <source id="theVideo" src="mp4/Captain_Video03.mp4" type="video/mp4">
	  Your browser does not support the video tag.
	</video><br>
	<button id="btn1" class="btn"></button>
	<button id="btn2" class="btn"></button>
	<button id="btn3" class="btn"></button>
	<button id="btn4" class="btn"></button>
	<button id="btn5" class="btn"></button>
 </div>
<script src="js.js"></script>	
</body>

my javascript:

(function(){
var **theVid** = document.getElementById("theVideo");
[].forEach.call(document.getElementsByClassName('btn'), function(btn) {
btn.addEventListener('click', function(e) {

switch (e.target.id){
case "btn1":
theVid.src = "mp4/Captain_Video01.mp4";
break;
case "btn2":
theVid.src = "mp4/Captain_Video02.mp4";	
break;
case "btn3":
console.log("button three selected!");
break;
case "btn4":
console.log("button four selected!");
break;
default:
console.log(e.target.id);
}
})
})
}())

When I click on btn1 or btn2 it should change the video in the player. The values of the src attribute is all I’m trying to change

.

2

Remove the hash from #id="theVideo"

3

That was dumb of me. I took it out now there’s no response when I click thoes buttons.

4

Clicking the buttons should be doing something.

What it should be doing is attempting to change the “src” value of “theVid” where ever that is.

5

If you look at the html from line 10 to 13 there is a video tag within that is a source element with id of “theVideo” the src attribute has a video address and it plays a video from the mp4 folder. All I need to do is change the value of the src attribute. If the script would run as intended pressing btn1 would load Captain_Video01 into the player so when I press the play button on the controls that video runs. I’m trying to make an html version of this flash page I wrote about 9 years ago. http://www.jimslounge.com/publicDomain/captainVideo/cvLiquid.swf

6

Yes, I saw “theVideo”
But I do not see any “theVid”

7

It’s the var defined on the first line of the function.

8

So it is. Thanks. I was blindered looking for it the HTML I didn’t see it there hiding in plain sight.

Are you getting anything in the console.logs ?
Maybe add a few more to see if you can pinpoint where it’s breaking?

9

only when pressing the other buttons. I just now added 2 lines writing to the console under the lines I’m trying to make work and they write to the console just fine. I’ll put this into a codepen and give you the url.

1 Like
10

here’s my codepen: http://codepen.io/jimeast/pen/vGpNzm
the videos are too big to upload to it. maybe I can edit some to partial versions but that would take a while.

11

It looks like the JavaScript is working as far as changing the src value.

But I am seeing a
“No video with supported format MIME type found” so it’s hard to say what’s happening.

I’m pretty much at a loss, but I’m thinking the browser doesn’t change the display when the src changes,

But if that is the case, I can’t think of how to make it change short of a page reload, but then the JavaScript would start over again without there being a Cookie of GET var to work from.

12

I’m not sure this works via the <source> element. If you only have one, try setting the src property on the <video> tag itself.

1 Like
13

Ah, it’s amazing what a short feeding break can do.

I think this would work though it doesn’t seem like a bandwidth friendly way to go about it.

Instead of using JavaScript to change the source values and finding a way for the browser to fetch the new source, you could preload them. eg.

var vid1 = "mp4/Captain_Video01.mp4";
var vid2 = "mp4/Captain_Video02.mp4";
var vid3 = "mp4/Captain_Video03.mp4";
....

But if you had 5 10MB that would be 50MB worth to download first time around. Ouch!

You could save some by instead of having 5 options, having only a “next” so you could do “anticipated” loading, i.e.
Load vid1 and vid2, when vid2 s selected load vid3,
That is, whike one is being watched, the next is loading in the background

14

This makes sense as the purpose of the source tags is to provide multiple formats of the video so the browser can select which format it supports. Presumably when dynamically setting from JavaScript you should already have determined which format the browser supports in order to know which format to dynamically set.

Also there are several questions on stackoverflow that present this as the solution to this particular problem.

15

It worked!! Thanks again. I even got it to workd on my codepen with very short versions of the videos http://codepen.io/jimeast/pen/vGpNzm

16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.