I am monitoring download progress for an HTML5 video player. It does not work on IE 10/11 on Windows 8/8.1 but works on every other browser I have tried (including latest FF and Chrome).
Here is my code and the explanation of the issue after:
<videoid="myVideo"width="640"height="360"controls><sourcesrc="http://www.oneshotprodnews.com/media/360p.mp4"type='video/mp4; codecs="avc1.42E01E,mp4a.40.2"'/></video><scripttype="text/javascript">var video= $('#myVideo')[0];var videoJ= $('#myVideo');function doUpdateProgress(){
console.log(video.buffered.length);}
videoJ.on('progress', doUpdateProgress);
videoJ.on('canplay', doUpdateProgress);//http://www.oneshotprodnews.com/media/360p.mp4 => does not work//http://www.provideoencoding.com/betavdp/media/360p.mp4 => does work</script>Problem is with the URL on my server - "http://www.oneshotprodnews.com/media/360p.mp4" - video.buffered.length always returns 0 in IE 10/11 (undefined
in IE9).
If I put in an URL from a shared server - "http://www.provideoencoding.com/betavdp/media/360p.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 hence I know it is not coming from a file format issue.
Based on that I am leaning towards a server side issue but it seems very specific to IE. My mime/type seems ok, I have partial support (byte-range) content enabled on my server (Apache on Ubuntu server). So I am stuck - why IE 10/11 just won't catch the video.buffered infos? I have also noticed that when I try to seek in the video when I have the issue on IE it waits for data to come in up to the point where I seek and does not seek immediately.
Can someone bring some light on this?
Thanks