HTML5 video - video.buffered.length returns 0 on I

Question

I am monitoring download progress for an HTML5 video player. IE 10/11 on Windows 8/8.1 is causing me troubles. Here is my code and the explanation of the issue after:

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<video id="myVideo" width="640" height="360" controls>
<source src="pathto.mp4" type='video/mp4; codecs="avc1.42E01E,mp4a.40.2"' />
</video>
<script type="text/javascript">
var video= $('#myVideo')[0];   
var videoJ= $('#myVideo');    
function doUpdateProgress(){
console.log(video.buffered.length);
}
videoJ.on('progress', doUpdateProgress);
videoJ.on('canplay', doUpdateProgress);
</script> 

Problem is with the URL on my server url1to.mp4 video.buffered.length always returns 0 in IE 10/11 (IE9 returns undefined). It works fine on all other browsers I have tested (including Chrome and FF).

If I put in an URL from a shared server url2to.mp4 it returns 1 as expected even on IE10/11 (1 in the case you do not seek in the timeline of course). The mp4 files are exactly the same on bother servers hence I know it is not coming from a file format issue. I tried with another well-formatted mp4 (sample from videojs which I hosted on both server) and it also causes the issue.

Server side - my mime/type seems ok - I have partial support (byte-range) content enabled on my server (Apache 2.2.22 on Ubuntu server 12.04.3 LTS). Though I maybe think it could have something to do with a tweak in HTTP byte range support either client side or server side.

As it only happens on IE9/10/11 I have zero lead as to where to investigate further. I did ask the question on msdn but to no avail.

Can someone bring some light on this?

EDIT: remove real video URLs from question.

Thanks

Answer 1

OK I fixed it eventually with a complete clean install of Apache from 2.2.22 to 2.4.9. I did compile from source this time instead of taking the default package from Ubuntu server 12.04.3 LTS. I am unsure about the exact reason for this issue but I think it relates to HTTP range requests and responses being incompatible between IE 9/10/11 and some version/settings of Apache.

To summarize my troubleshooting steps for anybody who may have similar issue:

• check your server for proper mime/types
• wild card CORS (msdn suggested that)
• check your web sever supports ranges request/206 partial content. I have used CURL to check this on my server and it worked ok. However the sample PHP code from this page seemed to indicate otherwise which I think is what confused IE (the range headers were correctly returned but the response code was 200 and not 206 as with CURL).
• sometimes it just seems you need to compile from source (and from trusted source of official website) instead of using default package from OS. Even if there could be a step requirement at the beginning (especially if you have to fix dependencies) and sometimes for update - the end result can be worth your effort (I know there are pros and cons).
• check for your mp4 file format: try to host the sample from videojs and see if it works better. You may need to repackage/re-transcode.