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. Videos plattformübergreifend darstellen 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…

Letzte Version vom 23. Februar 2016 von Netzgänger
Jetzt WordPress Newsletter in dein Postfach

Melde dich jetzt für meinen Newsletter an und du erhältst regelmäßig Tipps und Tricks zu WordPress in dein Postfach. Natürlich kannst du ihn jederzeit abbestellen.


5 Kommentare

  1. Marco sagt:

    Gerade in Unternehmen befinden sich immer noch Arbeitsplätze mit Steinzeit-Browsern wie den IE 5.0 oder 6.0. Solange die Entscheider sich nicht dazu entschließen die Arbeitsplätze zu upgraden aber trotzdem den Anspruch stellen dass es bei allen gleich aussieht bleibt es haarig.

    Man hat’s hat nicht leicht als Webentwickler.

  2. Siegmund sagt:

    Ich frage mich wie lange das noch dauern soll? HTML5 gibt es ja nicht erst seit gestern.

    Besonders das Thema Videos ist ja im Bezug zu HTML5 spannend!

  3. Pascal sagt:

    Vielen Dank für die 4 Tipps. Ich bin selber dabei gerade eine Homepage aufzubauen und hatte mir Gedanken über die Implementierung von Videos gemacht. Ich glaube ich lass es lieber. Wenn ich mir nur vorstelle, dass ich bei jedem Video nur ein rumgefummel habe, bekomm ich jetzt schon Hörner.

  4. Bitskn sagt:

    Ich kann es auch kaum erwaren bis HTML5 flächendeckend eingesetzt wird und der ganze Flash und Silverlight Spuk endlich ein Ende hat.

  5. Hellma sagt:

    Ich hoffe das bald die Zeit von HTML 5 gekommen ist und es gängig ist. Das ist die einfachste Methode meiner Meinung nach.
    Sicherlich wird diese auch die schnellste und effizienteste sein 😉 Flash Player ist einfach veraltet!

Kommentar schreiben

Mit Absenden deines Kommentars erklärst du dich mit der Verarbeitung deiner hier angegebenen Daten einverstanden (Datenschutzerklärung). Diese werden nur zur Verwaltung der Kommentare verwendet und keinem anderen Zweck zugefügt. Du kannst jederzeit per E-Mail an info@netz-gaenger.de der Speicherung deiner Daten widersprechen.

* Notwendige Angaben

Netzgänger Webdesign | Rohrersmühlstraße 22 in Schwabach | Bayern
Kontakt: info@netz-gaenger.de
↑ oben
Inhalt