Adding sources to HTML5 video in javascript?

Question

I am running the following code for html5 video.

var media;
function videotr(){
  media = document.createElement('video');
  media.preload = true;
  media.id = 'it'; 
  document.getElementById('crop').appendChild(media)
  return media;
}                
var div = document.getElementById('crop');
$(div).empty();
this.image = new videotr();
this.image.src = args.src;

However, I would like to implement multiple sources for compatibility. How can add in multiple sources through java script? I want to do this the right way, not through innerHtml.

Matthew · Accepted Answer · 2011-08-25 14:43:48Z

51

Create a new source element and append it to the video element:

function addSourceToVideo(element, src, type) {
    var source = document.createElement('source');

    source.src = src;
    source.type = type;

    element.appendChild(source);
}

var video = document.createElement('video');

document.body.appendChild(video);

addSourceToVideo(video, 'http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv', 'video/ogg');

video.play();

Here's a fiddle for it.

answered Aug 25, 2011 at 14:43

Matthew

16.1k2 gold badges40 silver badges33 bronze badges

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

2 Comments

Jeremy Rubin Over a year ago

Thanks mate! Not only did you answer my question, but you also showed me fiddle, awesome! I still think they should have a video.source.1 type deal so that it can be more streamlined, but I guess that's slightly against standard html.

deshu Over a year ago

December 2022, still works.

Collectives™ on Stack Overflow

Adding sources to HTML5 video in javascript?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related