Setting "src" attribute for html5 player in ie

Question

I have tried with the following factors for setting the src attribute for my html5 video player in i.e.,

 $("#vid").attr("src","video.mp4");

  $("#vid").setAttribute("src","video.mp4");

  $("#vid").prop("src","video.mp4");

i have searched in many forums that attr() is not working in ie browser and they are giving alternate solution as

use val() function for setting the value for the particular tag.

use $("#div").id = "value" for some of the attribute like id,class and some events like click.

But i could not find the solution for changing the src of the particular video or image. please help me to resolve this problem

Which IE version? below IE 11 it doesn't work, you'll need to use flash objects to play video's... — Tschallacka, Sep 03 '13 at 07:27
have a look: http://stackoverflow.com/questions/7942619/javascript-with-html-video-load-play-function-not-firing — Ivan Chernykh, Sep 03 '13 at 07:29
"src" only not loading in my video tag. Not a video loading problem — Kalaiyarasan, Sep 03 '13 at 07:31

score 1 · Answer 1 · answered Sep 03 '13 at 07:29

If you are going to use native DOM attributes, you need to get the DOM element (not a jQuery collection):

document.getElementById('vid').src = 'video.mp4';

Or:

$('#vid').get(0).src = 'video.mp4'

But I’m guessing that this is not where the IE problem lies, make sure the browser supports HTML5 video at all.

If you are using a flash replacement for IE, you will not be able to change the src attrbute at runtime. You will have to replace the entire flash container.

score 0 · Answer 2 · answered Sep 03 '13 at 07:45

so let us say that you have the following HTML code:

 <video id="vid" width="320" height="240" controls>
    <!-- You might do different for browser compatibility. -->
    <source src="" type="video/mp4">
    <source src="" type="video/ogg">
 </video>

Now what we need to do is to first grap the video tag by its id [vid] and then loop through each source while changing their src. Like so:

$(function(){
  var myExt  = new Array();
  myExt[0]   = "mp4";
  myExt[1]   = "ogg";
  var extCounter = 0;

  $("#vid").children("source").each(function(){
    for(var i = 0; i < myExt.length; i++){
        $(this).attr("src","http://www.quirksmode.org/html5/videos/big_buck_bunny"+"."+myExt[extCounter]);
    }
    extCounter++;
  });
});

Click here for codepen link

p.s Check if your browsers supports it.. We are talking about ie here..

Setting "src" attribute for html5 player in ie

2 Answers2