Darstellungsprobleme auf Tablets beheben

HTML5-Video mit Fallback

Nicht alle User Agents unterstützen die Wiedergabe von HTML5-Video. Um eine alternative Methode für die nicht unterstützten Browser bereitzustellen, können Sie das Flash Player Browser Plug-in zu Hilfe rufen.

Das Attribut autoplay sorgt dafür, dass die Wiedergabe automatisch startet und keine weitere Benutzeraktivität erfordert.

Als letzter Rettungsanker folgen jetzt die Download-Links für das Video:

Außerdem benötigen Sie natürlich korrekt encodierte Versionen des Videoclips (einmal MP4, einmal WebM und einmal Ogg/Theora). Falls Sie das Video via XML bereitstellen, ersetzen Sie in dem obigen Code

durch

Im Übrigen wird die Wiedergabe von HTML5-Video unter Angabe des poster-Attributs unter iOS 3 auf Grund eines Bugs fehlschlagen (die Verwendung des poster-Attributs mit der Angabe der Quelle mittels <source> löst den Fehler aus). Sie könnten natürlich das problematische poster-Attribut auslassen.

Da Apple den Fehler inzwischen in iOS 4.0 längst behoben hat - denn die aktuelle Version trägt mittlerweile die stolze Nummer 6 - und iOS 3 kaum noch Relevanz hat, können Sie diesen Bug getrost ignorieren. Das poster-Attribut für das HTML5-Video können Sie ganz einfach wie folgt angeben:

Da einige Browser dieses Attribut dennoch ignorieren, empfiehlt es sich, das Ersatzbild als ersten Frame in den Videoclip einzusetzen und im Clip zu encodieren.

In Browsern, die HTML5 unterstützen, erfolgt die Wiedergabe der HTML5-Version der Datei. Sollte dieser Versuch fehlschlagen, kommt der Flash Player zum Zuge, jedoch nur dann wenn er bereits installiert sein sollte (einer besseren Usability zuliebe wird das Fehlen des Flash-Plug-ins nicht bemängelt).

Ratgeber: Navigation mit CSS

Sollte auch dieser Versuch misslingen, zeigt der Browser das Ersatzbild an; der Besucher kann in diesem Falle zumindest die beiden Download-Links benutzen. Indem Sie die beiden Links zum Herunterladen des Videos in zwei alternativen Formaten bereitstellen, verschaffen Sie Ihren Benutzern die Möglichkeit, den Clip lokal auf ihrem Computer abzuspielen, sollte die Wiedergabe im Browser definitiv fehlschlagen.

Diese Methode der Einbindung von HTML5-Video mit einem Fallback auf Flash erfordert kein Javascript. Der Code funktioniert in einer Website mit HTML4, HTML5 (mit gültigem Markup), XHTML1 und außerdem in einem Dokument vom Typ application/xhtml+xml.

Webvideo: Probleme mit der Videowiedergabe

Bei Problemen mit der Wiedergabe von Webvideo überprüfen Sie, ob Ihr Webserver die korrekten MIME-Typen verwendet. Firefox verweigert die Wiedergabe von Ogg-Video, wenn der MIME-Typ nicht stimmt. Um das Problem zu beheben, fügen Sie der betreffenden .htaccess-Datei auf dem Webserver die folgenden Zeilen hinzu:

Webvideo: Scrubbing im Video

Sollten Ihre Besucher in den Webvideos in Firefox und Opera nicht mit der Zeitmarke suchen können, könnte es daran liegen, dass Ihr Browser alle MIME-Typen mittels gzip automatisch komprimiert. Diese Einstellung können Sie in der Konfiguration Ihres Webservers ändern. Bei Apache können Sie eine passende Anweisung auch in die .htaccess-Datei eintragen:

CSS: Cache-Aktualisierung erzwingen

Falls Sie den Browser anweisen, die Website aus dem Cache zu laden, dann aber das Design der Website aktualisieren, würden dennoch die alten Stylesheet-Dateien geladen. Um eine Aktualisierung der Stylesheets zu erzwingen, können Sie an den Dateinamen des jeweiligen Stylesheets eine Versionsnummer anhängen, zum Beispiel stylesheet.css?v=1, stylesheet.css?v=2, stylesheet.css?v=3. Der Browser geht dann davon aus, dass es sich bei dem Stylesheet um eine neue Datei handelt, und lädt sie nicht mehr aus dem Cache.

Performance: gzip-Kompression überprüfen

Eine der einfachsten Methoden, um die Website zu beschleunigen, besteht im Aktivieren der gzip-Kompression von Webdokumenten durch den Webserver. Der Vorteil dieser Methode kommt insbesondere gegenüber mobilen Geräten zum Tragen, da diese meistens nur eine relativ beschränkte Bandbreite zur Verfügung haben.

Um zu prüfen, ob Ihr Webserver Webdokumente komprimiert (und falls ja, welche), können Sie zum Beispiel diesen kostenlosen Dienst nutzen: gzipwtf.com

Nach der Eingabe der URL und dem Ausfüllen des Captchas betätigen Sie ganz einfach die grüne Schaltfläche und schon erhalten Sie eine Liste aller relevanten Ressourcen und eine grafische Übersicht der Kompressionseinstellungen.

Performance: gzip-Kompression aktivieren

Um die Leistung einer Website zu verbessern, können Sie die gzip-Kompression von Webdokumenten durch den Webserver aktivieren. Die Frage, wie sich dies im Einzelnen bewerkstelligen lässt, kann Ihnen eigentlich nur Ihr Webhoster beantworten, denn die Vorgehensweise hängt von der Konfiguration Ihres Webservers ab. Wenn Sie Apache verwenden, können Sie in der Regel dieses Feature in der .htaccess-Datei aktivieren.

Den benötigten Code können Sie einem modernen Framework wie HTML 5 Boilerplate entnehmen. Navigieren Sie hierzu zur Projektseite auf Github unter der Adresse github.com und öffnen Sie die .htaccess-Datei in der Code-Ansicht oder in einem Texteditor. Navigieren Sie hier zum Abschnitt

und übernehmen Sie diesen sowie den Abschnitt

in die .htaccess-Datei auf Ihrem Webserver. Falls Sie auch die MIME-Typen einstellen möchten, können Sie sich des Abschnitts

aus der .htaccess-Datei des Frameworks bedienen.

.htaccess: Sprachvariable setzen

Wer die Sprachvariable auf Basis der Spracheinstellungen des Web-Clients setzen möchte, kann den folgenden Code nutzen:

Dadurch können Sie dem Client diejenige Sprachversion der Website bereitstellen, die mit der Konfiguration seines Systems übereinstimmt. Die alternative Sprachversion sollte dann aber über einen Link zugänglich sein, für den Fall, dass die Systemsprache und die bevorzugte Sprache nicht identisch sind.