Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding sources to HTML5 video in javascript?

Tags:

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.

like image 696
Jeremy Rubin Avatar asked Aug 25 '11 14:08

Jeremy Rubin


People also ask

How do you give a video source in HTML?

Attribute Values The URL of the video file. Possible values: An absolute URL - points to another web site (like src="http://www.example.com/movie.ogg") A relative URL - points to a file within a web site (like src="movie.

How do I change the src of a video tag?

To change source on HTML5 video tag with JavaScript, we an set the src property of the video element. const changeSource = (url) => { const video = document. getElementById("video"); video. src = url; video.

How do you tag a video in JavaScript?

The <video> tag is used to embed video content in a document, such as a movie clip or other video streams. The <video> tag contains one or more <source> tags with different video sources. The browser will choose the first source it supports.

What is the HTML 5 element for adding video to a Web page?

The HTML <video> element is used to embed video in web documents. It may contain one or more video sources, represented using the src attribute or the source element. The <video> element is supported by all modern browsers.


1 Answers

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.

like image 52
Matthew Avatar answered Oct 02 '22 08:10

Matthew