Question
Hi I am very new to javascript. I have a .webm and .mp4 video source, but how can I add another source in javascript, I have only managed to put in 1 (webm), what is the code i need to add another one in?
Thank You in advance.
Hi, The reason why I need to put in JS is because divx plugin is replacing the html5 video elements, like on this thread Prevent divx web plugin fron replacing html5 video element?
Here is my code
https://stackoverflow.com/questions/15041416
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<script type="text/javascript">
function changevid() {
document.getElementById('vid').innerHTML = '<source src="http://avalonplay.com/video/loginvideo.webm" type="video/webm" />';
document.getElementById('vid').load();
}
</script>
<body onload="changevid()">
<video id="vid" width="800" height="450" loop="loop" preload="auto" autoplay style="width: 100%; height: auto; margin:0; right: 0;">
</video>
</body>
Solution
I suggest that you only add the one that you need.
For example:
function changevid() {
var vid = document.getElementById('vid');
if (vid.canPlayType('video/mp4') != '') {
vid.src = 'http://avalonplay.com/video/loginvideo.mp4';
}
else if (vid.canPlayType('video/webm') != '') {
vid.src = 'http://avalonplay.com/video/loginvideo.webm';
}
vid.load();
}
OTHER TIPS
You could use .appendChild() instead of .innerHTML
But a better solution would be to test for browser support and then only add the supported video type:
window.onload = function(){
var vid = document.getElementById('vid');
var source = document.createElement('source');
var supported = supportedVidType();
source.src = 'http://avalonplay.com/video/loginvideo'+supported.src
source.type = supported.type
vid.appendChild( source );
}
var supportedVidType = function(){
var vidTest = document.createElement( "video" )
var types = {}
if ( vidTest.canPlayType ) {
// Check for MPEG-4 support
types.mp4 = "" !== vidTest.canPlayType( 'video/mp4; codecs="mp4v.20.8"' )
// Check for Webm support
types.webm = "" !== vidTest.canPlayType( 'video/webm; codecs="vp8, vorbis"' );
// Check for Ogg support
types.ogg = "" !== vidTest.canPlayType( 'video/ogg; codecs="theora"' );
}
for( type in types ){
if(types[type]) {
return {
type: 'video/'+type,
src: '.'+type
}
}
}
}
Here is a jsfiddle: http://jsfiddle.net/2gd3m/2/
the video tag supports multiple sources:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
