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
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.
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.
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.
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
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.