Javascript adding 2 video sources

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

<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>

Jesse Lee · Answer 1 · 2016-04-02T20:32:57.947

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/

score 2 · Accepted Answer · answered Feb 23 '13 at 15:47

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();
}

score 0 · Answer 3 · answered Feb 23 '13 at 15:38

0

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>

from: http://www.w3schools.com/tags/tag_video.asp

answered Feb 23 '13 at 15:38

El Hocko

2,581
1
13
22

Hi, The reason why I need to put in JS is because divx plugin is replacing the html5 video elements, like on this thread http://stackoverflow.com/questions/4745626/prevent-divx-web-plugin-fron-replacing-html5-video-element – AngelaK Feb 24 '13 at 00:23
mhhhhh.. and it is because of you permissive programmer that the divx-people win..!!!! shame on you!!!!!!! – El Hocko Feb 24 '13 at 01:27

Javascript adding 2 video sources

3 Answers3