Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Kleiner Fallstrick bei Videos

HTML5

Kleiner Fallstrick bei Videos

Mit dem eigenen Video-Element sollten in HTML5 alle Probleme gelöst sein, die wir mit Flash jemals hatten. Doch so ganz stimmt das leider nicht.

Es ist schon seltsam: HTML5 bringt ein neues Video-Element mit und trotzdem gibt es ein großes Angebot an JavaScript-Bibliotheken, die eine Videoeinbindung realisieren. So hatten wir uns die Zeit nach Flash sicher nicht vorgestellt.

Der schlichte Einsatz von Videos erfordert kein JavaScript. Allerdings bietet HTML5 eine umfassende API zum Umgang mit Videos. Mittels JavaScript können wir auf die Kontrollelemente zugreifen und sie mittels CSS neu gestalten. Auch das Auslesen von Zeitmarkierungen ist nun einfach möglich. Wir sollten also annehmen, dass die Zusammenarbeit zwischen HTML5-Video und JavaScript reibungslos funktioniert.

Und da es sich beim Video-Element nun um ein natives Element handelt, sollte es auch mit CSS fürs Video keine Probleme geben. Leider stimmt das nicht in jedem Fall und in jedem Browser.

Links über einem Video

Stellen wir uns vor, dass als Teil eines Projektes Links oberhalb eines Videos eingeblendet werden sollen. Es ist hierbei unerheblich, ob diese Links nur zeitgesteuert ein- und ausgeblendet werden oder manuell. Der Einfachheit halber (und zu Demonstrationszwecken) platzieren wir eine Linkliste oberhalb eines Videos.

Diese Links sind nun in allen Browsern anklickbar, leider aber nicht auf iOS-Geräten. Dort sind die Links erst dann klickbar, wenn das Attribut controls entfernt wird. Dadurch werden die clientseitigen Controls unterdrückt. Der Entwickler muss dann mittels JavaScript und CSS eigene Controls erstellen. Alle Browser auf Android machen übrigens keine Probleme.

So greifen wir also zurück auf eine umfangreiche Übersicht von JavaScript-Bibliotheken, um eine adäquate Lösung zu erhalten. Leider wird damit die Funktionsfähigkeit des Videos, des ganzen Moduls, abhängig von JavaScript.

Einen Grund für dieses spezielle Verhalten des mobilen Safari habe ich nicht finden können. Der Safari auf dem Desktop verhält sich wie gewünscht. Ob und wann dieses Problem seitens Apple gelöst wird, steht damit in den Sternen.

Kommentare

Christian Heilmann

Christian Heilmann (Webkraut)
am 08.12.2012 - 11:44

Das hoert sich fuer mich allerdings nicht nach einem HTML5 problem an sondern einem bug in iOS. Genauso wie autoplay in iOS ja auch nicht geht sondern man per hand das video aktivieren muss. Also genau der gleiche "click to enable" Unfug den Flash im IE hatte. hoert sich nach einem patent problem an - wie immer.

Ich hab ausser einem iPod hier kein iOS kann es also nicht testen. koennte man das allerdings umgehen wenn man die controls ausschaltet waehrend das play event laeuft und kein hover passiert und wieder einschaltet wenn die maus oder der Fokus wieder reinkommt.

In jedem Fall zeigt das fuer mich das iOS Fehler mit Videos hat und nicht HTML5.

Permanenter Link
Jens Grochtdreis

Jens Grochtdreis (Autor)
am 08.12.2012 - 18:26

Habe ich denn behauptet, dass es ein HTML5-Problem ist? Ich finde, es ist ein Implementierungsproblem. Ein Fehler von Apple.
Die Idee war doch, dass wir native Schnittstellen bekommen. Ich habe das so verstanden, dass wir grundlegende Features mit HTML nutzen können und kein JavaScript mehr benötigen.

Dieses Detail macht mir allerdings die Nutzung von JavaScript notwendig. Leider. Auch das Styling der Bedienelemente geht wohl nur mit JS. Schade. Aber vielleicht bekommen wir ja in ein paar Jahren einen standardisierten Zugang zum Shadow DOM.

Ich denke, wir sind uns vollkommen einig, dass das alles kein HTML5-Problem ist, sondern ein Apple-Problem. Und da man mit Apple nicht reden kann, wird es auch noch lange bleiben. Leider.

Permanenter Link

Sylvia Egger
am 09.12.2012 - 21:30

Das ist einfach eine neue Situation, da permanent an HTML-Elementen und ihren Funktionen gearbeitet wird. Safari hat z.B. bis dato die schlechteste Unterstützung beim video Element. iOS belegt den Touch-Event auf dem Video vollständig, daher kann für andere Elemente der nicht mehr genutzt werden - es sei denn man nutzt Javascript um den Default zu aktivieren.

Es ist halt ein Default, der kann mit unterschiedlichen Einschränkungen genutzt werden. Will man mehr oder anderes, bietet die API guten Javascript-Zugang. Ich denke, das wird auch in Zukunft zu sein. Es ist wohl nicht geplant, dass die Kontrollelemente auch per CSS modifizierbar sein sollen.

Mir gefällt das auch nicht immer, aber ich sehe das halt als browsereigenen Default - es wäre schöner, das per CSS anpassen zu können, aber naja. :)

Permanenter Link
Jens Grochtdreis

Jens Grochtdreis (Autor)
am 10.12.2012 - 10:01

Klar ist das ein Default. Deshalb noch einmal langsam zum Mitschreiben: Uns wird HTML5 als Vereinheitlichung verkauft und ich persönlich verkaufe es auch so. Das funktioniert auch in vielen Punkten blendend und ist super. Aber es gibt Details, da ist die Realität nicht so schön. Und nicht immer ist Apple derjenige, der aus der Reihe tanzt. Das ist schade und muss man einfach wissen, bevor man denkt, alles sei nun eitel Sonnenschein.

Um mehr ging dieser kleine Beitrag nicht.

Permanenter Link

Martin Mengele
am 11.12.2012 - 00:11

Danke für den Hinweis. Ich hatte gerade das selbe Problem. Und es ist ja nicht das einzige Gewürge im iOS. Ich habe zum Beispiel festgestellt, dass mit Microdaten ausgezeichnete Telefonnummern wie z.B. <span itemprop="telephone">12345</span> vom iOS plötzlich als <a href="tel:12345">12345</a> umformatiert werden. Oder auch das "emulieren" von :hover in Touch-Devices finde ich extrem problematisch (http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/).
Jetzt ist auch mal wieder gut mit der geschönten Usability, liebe Apfeltypen...

Permanenter Link

Die Kommentare sind geschlossen.