Regelmatig krijgen we de vraag om audio of video te plaatsen in een site. Over het algemeen geen lastige klus maar het kan problemen met zich meebrengen. Graag maken we gebruik van de JW player van LongTail video om audio en/of video te plaatsen in een site. Over het algemeen treden er weinig problemen op bij het implementeren van dergelijke plugins. Toch zijn we tegen een situatie aangelopen die voor haperingen zorgde bij het afspelen van MP3 bestanden.
Op de site Boekschrijven.nl worden audiofragmenten aangeboden. Een preview is te beluisteren via de site. Tevens is er voor de player in deze site een custom skin ontwikkeld. Tijdens het testen van de player merkten we dat Firefox regelmatig een tweede druk op de playknop nodig had om het audiofragment af te spelen. Chrome liet de progress bar af en toe heen en weer gaan en Internet Explorer liet helemaal geen voortgang in de progress bar zien. Ook de totale lengte van het audiofragment werd niet weergegeven.
Na wat onderzoek blijkt dat Gzip de boosdoener is bij het streamen van de audio. Veel webservers gebruiken Gzip om de pagina’s in een kleiner formaat en dus sneller aan te kunnen bieden. Een wat ouder maar duidelijk artikel hierover is hier (Engelstalig) te vinden. Gzip is een goede techniek die de snelheid van een site kan bevorderen maar werkt in dit geval in ons nadeel.
Wat kunnen we doen om ervoor te zorgen dat Gzip de MP3 bestanden niet meer probeert te comprimeren. Een optie is het uitschakelen van Gzip. Dit kan door de volgende regel toe te voegen in het .htaccess bestand.
SetEnv no-gzip dont-vary
Deze regel zorgt ervoor dat in voor de gehele site Gzip uitgeschakeld wordt. Effectief maar zeer drastisch.
Wat we eigenlijk willen is dat Gzip wel gebruikt wordt maar media bestanden ongemoeid laat. Deze worden immers al vaak in hun meest gecomprimeerde vorm op de server geplaatst.
Dit kunnen we simpelweg realiseren door een tweede .htaccess bestand aan te maken. WordPress slaat alle uploads standaard op in de map /wp-content/uploads. Door in deze map het tweede .htaccess bestand aan te maken en bovenstaande regel in te voeren wordt Gzip enkel uitgeschakeld op de bestanden in deze map inclusief alle submappen. Zo worden alle mediabestanden niet meer beïnvloed door Gzip en verdwijnen ook onze verdere streamproblemen zonder dat we de Gzip functionaliteit volledig uit hoeven te schakelen.
Update:
Via de reacties kwam Patrick Vos met een alternatief.
Op deze manier hoeft er geen extra .htaccess bestand aangemaakt te worden en kan zo het overzicht beter bewaard blijven.
SetEnvIfNoCase Request_URI \.(?:mp3|m4v|ogv|mp4)$ no-gzip dont-vary
De extensies in bovenstaande voorbeeld kunnen aangepast worden.
Zelf stop ik liever zoveel mogelijk in één .htaccess file (voor overzicht). Het is ook mogelijk:
SetEnvIfNoCase Request_URI \.(?:mp3|m4v|ogv|mp4)$ no-gzip dont-vary
in de root .htaccess te gebruiken. Dus geen Gzip voor alle bestanden met extensie mp3 (of m4v, ogv, mp4).