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.
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.
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With