HTML5 media loading sometimes suspends or aborts: misconfigured Apache?
- by Joan Botella
Recently, some code that has been working fine for months started to run unexpectedly. That code is just a media files loading JavaScript function, that uses jQuery. It's pretty long, but in essence it is like this:
var $audio=$('<audio>');
$audio.on('canplaythrough',function(e){
$audio[0].play();
});
$audio.attr('src','song.ogg');
Basically, the file only loads sometimes, and sometimes stops loading with a suspend or even an abort event.
I have uploaded a little testing HTML to http://www.joanbotella.com/tests/loading , where you can see what's happening. You can download the test files from http://www.joanbotella.com/tests/loading/loadingTest.zip for local testing.
I have just checked that opening the test index.html file directly into Firefox, and not through my localhost Apache server, makes the audio files perfectly playable. So, I assume, my hosting and I have the Apache server misconfigured for serving media files.
My software versions are: Apache 2.2.22-1ubuntu1.7 , Mozilla Firefox 31.0 , Chromium 36.0.1985.125 and jQuery 1.11.0.
Can you help me? Thanks in advance!