HTML5 video source will not successfully change in IE

Question

I'm going nuts over this problem. I have a script that changes the sources of a <video> tag, then reloads it and plays it. The problem is that I just can't get it to work on any version of Internet Explorer.

I have an array of video sources called sequence.sources , containing:

sequence.sources = ['video.webm', 'video.mp4', 'video.ogv'];

The sequences object is loaded from another array, so that's the dynamic aspect of it all. The function I use to change the video sources is as follows:

var videoElem = document.getElementById('video');

// Remove all sources
while (videoElem.firstChild) {
    videoElem.removeChild(video.firstChild);
}

// Add new sources
for (var i = 0; i < sequence.sources.length; i++) {
   var srcElem = document.createElement('source');
   srcElem.setAttribute('src', sequence.sources[i]);
   videoElem.appendChild(srcElem);
}

// Initiate video
videoElem.load();
videoElem.play();

This works perfectly on all browsers but IE. What am I to do? I've already tried modifying the src attribute of the <video> tag directly, but that doesn't seem to work. I've even tried removing the entire <video> tag and adding a new one with the updated sources. No cigar.

This is possibily off topic, but I'm considering the possibility that I must add some .htaccess hack to make it work. Any suggestions would be greatly appreciated.

My final thought is that all sources except the first one are somehow faulty and won't be played. Is there some way I can check their compatibility with IE?

EDIT: Network tab on developer tools give me 206 partial as result of the http request. This is highly likely to be an encoding compatibility issue. I will probably close this question soon if that proves to be the case.

Answer 1

the problem is that you create source nodes and then try to change the src attribute. That does not work in IE. Instead only use the src attribute. A complete solution can be found in my post here: https://stackoverflow.com/a/7905151/818732 ... try to google such things and add "stackoverflow" to get the best results.

By the way: have you ever tried just adding the mp4 file directly as an attribute (in the html code)? if yes and it still does not work check if your server returns the correct mime-type for .mp4 files ( video/mp4 ).

Last but not least - utilize caniuse.com to check for browser support. For starters, here is the link for mp4s: http://caniuse.com/mpeg4