CODEWITHSUNDEEP
javascripthtmlvideomp4webm
AngelaK
AngelaK

Reputation: 11

Javascript adding 2 video sources

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>

Upvotes: 0

Views: 2394

Answers (3)

Jesse Lee
Jesse Lee

Reputation: 1301

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/

Upvotes: 2

Ian Devlin
Ian Devlin

Reputation: 18870

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

Upvotes: 2

El Hocko
El Hocko

Reputation: 2606

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

Upvotes: 0

Related Questions