4 Tipps um Videos plattformübergreifend in Webseiten einzubauen

Wer Videos abseits von Youtube und (NATÜRLICH!) ohne Flash in eine Webseite einbauen möchte, steht zwangsweise vor dem Problem, dass es unheimlich schwierig ist alle Plattformen und Browser abzudecken. 4 Tipps, die den Unterschied ausmachen können. Gleich vorweg: Es gibt KEINE ultimative Lösung, mit der man Videos nicht nur für PC, Mac, Tablets und Smartphones kompatibel darstellt, sondern auch noch für sämtliche Browserversionen.

Wie baut man Videos in Webseiten ein?

Video.js ist ein Open Source HTML5 Video Player, der auf Javascript und CSS basiert und seine Sache sehr gut macht. Ich beschränke mich hier auf diese Lösung, obwohl es sicher noch andere Ansätze gibt. Wie der Einbau en detail funktioniert, will ich hier gar nicht posten. Vor allem, da ich keine Lust habe diesen Artikel regelmäßig zu überarbeiten, wenn sich etwas am Code von Video.js ändert.

Lösungen für Browser-Inkompatible Videos

Vielmehr möchte ich ein paar Lösungsansätze liefern, wie man Inkompatibilitäten bei der Darstellung von Videos beseitigt. Man kann nämlich wahnsinnig werden, wenn man verzweifelt versucht es allen Plattformen und Browsern recht zu machen. Funktioniert es am Firefox am PC, heißt das noch lange nicht, dass es am Firefox des Mac’s ebenso funktioniert. Ganz zu schweigen vom Internet Explorer, der ja sowieso immer sein eigenes Ding durchzieht.

Warum werden Videos nicht im Browser abgespielt?

Unterschiedliche Browser unterschiedlichster Plattformen wollen teilweise unterschiedliche Videoformate. Und damit nicht genug, ist auch noch der MIME-Type sauber anzugeben. Und damit nicht genug, spielt auch noch der ausspielende Server eine Rolle. Und und und… Lange Rede, kurzer Sinn…Folgend ein paar Maßnahmen die mir geholfen haben, Videos auf nahezu ALLEN Plattformen und Browsern der relativ aktuellen Generation laufen zu lassen:

Browserübergreifende Darstellung von Videos optimieren

1. Fallbacks für die verschiedenen Videoformate anbieten

Interessant sind eigentlich nur die Videoformate .flv, .mp4, .ogv und .webm. Firefox mag keine .mp4’s…das ist schade, die anderen nämlich schon. Der IE mag nur .mp4, die anderen nicht. Und so weiter dreht sich der Teufelskreis. Also bietet man am besten alle Videoformate als Fallback an. Also mindestens .mp4 für IE, Chrome, Safari. .ogv für den Firefox. Für ältere Browser kann man immer noch den .flv Fallback verwenden. Auf Nischenbrowser wie Opera (ja, er ist einer) gehe ich gar nicht erst ein.

2. Absoluten Pfad angeben

Ich die Erfahrung gemacht, dass absolute Pfade zu den Videodateien die Kompatibilität erhöhen. Warum auch immer relative Pfade hier Probleme machen…

3. Preloading aktivieren

Ebenso für mich ein Mysterium warum…aber das Aktivieren des Preloadings hat ebenso Vorteile bei der Kompatibilität zwischen den Browsern und Plattformen.

4. Amazon CDN verwenden

Jeder Webserver ist unterschiedlich eingerichtet. Manche unterstützen nicht alle MIME-Types. Mime-Types klassifizieren den Internetmedientyp, der gerade abgerufen wird. Diverse Browser wollen hier ganz genau wissen, was kommt und zwar KORREKT! Meine Erfahrung hat gezeigt, dass ein Amazon CDN hier wunderbar funktioniert, vor allem wenn man dann anschließend noch in der Cloud auf dem Server der hochgeladenen Datei (zB einem .mp4) den richtigen Mime-Type zuweist. In meinem Fall war es der Mime-Type „video/mp4“ der extra zugewiesen werden musste. Schwupps funktionierten auch mp4’s im Firefox auf dem Mac.

Fazit

Wer gehofft hat hier eine Komplettanleitung zu finden, den muss ich leider enttäuschen. Jeder ist hier seines Glückes Schmied. Die 4 Tipps, die ich hier liste, haben mir sehr geholfen. Vielleicht euch auch…