how would i add more video sources to my javascript code?

Question

i have 5 different videos and i want them to add more then one source to them so that they can play in more browsers but im not sure on how to make it so you can do that. here is what my javascript looks like it is pretty repetitive

function addVideo1() {
  var changeStuff = document.getElementById("myVideo");
    changeStuff.src = "video/demoreel.mp4";

}

function addVideo2() {
 var changeStuff = document.getElementById("myVideo");
    changeStuff.src = "video/video1.mp4";
}

function addVideo3() {
    var changeStuff = document.getElementById("myVideo");
    changeStuff.src = "video/video2.mp4";
}

function addVideo4() {
    var changeStuff = document.getElementById("myVideo");
    changeStuff.src = "video/video3.mp4";

}

function addVideo5() {
    var changeStuff = document.getElementById("myVideo");
    changeStuff.src = "video/video4.mp4";
}

Tim Hobbs · Accepted Answer · 2012-12-21 23:54:19Z

1

Try this jsFiddle, it should do what you want.

ARGH! I did it in jQuery, sorry. I wasn't paying attention. Ok, I went back and did it in plain ol' javascript.

HTML

<div id="video"><video></video></div>
<ul>
    <li><a href="#" data-video="video1.mp4">Video 1</a></li>
    <li><a href="#" data-video="video2.mp4">Video 2</a></li>
    <li><a href="#" data-video="video3.mp4">Video 3</a></li>
</ul>

JS

var elems = document.getElementsByTagName("a");
for (i = 0; i < elems.length; i ++) {
    elems[i].addEventListener("click", function () {
        var video = this.dataset["video"];
        var source = document.createElement("source");
        source.src = video;
        var container = document.getElementById("video");
        var v = container.firstChild;
        v.innerHTML = "";
        v.appendChild(source);
    });
}

CSS

Not necessary, just to "prettify" it a bit

html { padding: 10px; }
#container { width: 450px; }
#video { width: 320px; height: 240px; border: 3px solid #CCC; }
ul { margin: 10px 0; width: 320px; padding: 0; }
ul li { display: inline; margin: 0 10px 0 0; padding: 0;  }

edited Dec 21, 2012 at 23:54

answered Dec 3, 2012 at 21:53

Tim Hobbs

2,02717 silver badges24 bronze badges

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

1 Comment

zac Over a year ago

i didnt mention that i have five different buttons and when you click on the button the video pops up and i have one video tag so that when you click on them it goes in that spot

Sophie · Accepted Answer · 2012-12-03 21:37:23Z

1

To create multiple sources, you need to have source elements inside the video tag rather than using the video's source attribute. Use:

sourceElement=document.createElement("source")
sourceElement.source=someSource
sourceElement.type=someType
changeStuff.appendChild(sourceElement)

answered Dec 3, 2012 at 21:37

Sophie

8107 silver badges18 bronze badges

5 Comments

zac Over a year ago

this what i have in my html ' <video id="myVideo" source src="video/demoreel.mp4" type="video/mp4" controls autoplay></video> <div> <a href="#" onClick="addVideo1()">Demo Reel</a> <a href="#" onClick="addVideo2()">Video1</a> <a href="#" onClick="addVideo3()">Video2</a> <a href="#" onClick="addVideo4()">Video3</a> <a href="#" onClick="addVideo5()">Video4</a> </div>'

zac Over a year ago

and javascript now function addVideo1() { sourceElement=document.createElement("source") sourceElement.source= "video/demoreel.ogv" sourceElement.type="video/ogv" changeStuff.appendChild(sourceElement) }

Sophie Over a year ago

I'm not sure why, I'm not able to test right now (on my phone), if your browser has firebug or some other developer tools, can you inspect the video element after addVideo1 is called and post the code?

zac Over a year ago

yea it just says { sourceElement=document.createElement("source") sourceElement.source= "video/demoreel.ogv" sourceElement.type="video/ogv" changeStuff.appendChild(sourceElement) }

Sophie Over a year ago

I mean the code for the video element after the JavaScript has modified it.

FrancescoMM · Accepted Answer · 2012-12-03 21:46:38Z

0

You can try something like this (untested, typed on mobile).

function addSource(id,type,path) {

    var vid=document.getElementById(id);
    vid.innerHTML+='<source src="'+path+'" type="'+type+'">';
}

answered Dec 3, 2012 at 21:46

FrancescoMM

3,0101 gold badge22 silver badges31 bronze badges

Collectives™ on Stack Overflow

how would i add more video sources to my javascript code?

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related