Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

Videos im Web - eine schöne Anwendung

Donnerstag, 15. Januar 2015

Für einen Kameramann, der sich auf professionelle Zeitrafferaufnahmen von Natur (Pflanzen, Insekten usw.) spezialisiert hat, durfte ich die Website neu erstellen.

Die Herausforderung dabei: Im Laufe der Zeit sollen bis zu 1000 Video-Clips präsentiert werden. Das Hochladen dieser Datenmenge muss natürlich der Inhaber der Website selbst erledigen. Ich habe daher ein Script erstellt, das aus den Dateien auf dem Server die entsprechenden Vorschauseiten erstellt, und auch die Präsentation der Videos selbst ohne manuelles Zutun erledigt.

Die Videos werden selbstverständlich ohne Flash, mit dem zeitgemäßen <video>-Element von HTML5 dargestellt. Die Dateien werden im MPEG-4/H.264 Video Format bereitgestellt, ein Format, das inzwischen von fast allen Browsern unterstützt wird, sowie zusätzlich im WebM Format. Letzteres wird lediglich noch für Firefox Versionen vor 35.0 und älter auf OSX und Linux-Systemen benötigt, und ist wohl bald verzichtbar.

Der Internet Explorer Version 8, der noch kein HTML5 kann, erhält als Fallback einen Link zum Download, bzw. zum Abspielen des Videos auf einem installierten Player.

Alle aktuellen Tablets und Smartphones mit iOS oder Android Betriebssystem können die "HTML5"-Videos abspielen.
Eine Besonderheit gibt es unter iOS und Android: Weder Autostart, noch das Vorladen der Videos werden unterstützt. Mit der nachvollziehbaren Begründung, das Datenvolumen von mobilen Nutzern erst dann zu belasten, wenn eine manuelle Eingabe erfolgt. Dies führt leider unvermeidbar dazu, dass der Start der Videos auf diesen Systemen deutlich verzögert wird.
Um auf Tablets während der Wartezeit nicht nur eine schwarzes Bild zu zeigen, wird daher zu jedem Clip ein Standbild gezeigt, das aus dem ersten Frame des Clips erzeugt wurde. (Das canvas-Attribut des video-Elements ist hierfür zuständig.)

Eine weitere Herausforderung:
Die Videos sollten an Hand von Stichwörtern durchsuchbar sein.
Die Lösung:
Zu jedem Video-Clip wird eine Textdatei mit entsprechenden Stichwörtern hinterlegt. Meine Suchfunktion wurde entsprechend angepasst: Durchsucht werden die Textdateien, zur Anzeige kommt aber nicht der gefundene Text, sondern das jeweilige Vorschaubild mit zusätzlichen Angaben —Name, Clip-Nummer usw. Das Ergebnis einer Suche ist im Design identisch mit der Anzeige der nach Kategorien unterteilten Clip-Archive.

Um die Seiten so schlank wie möglich zu halten, werden die Vorschaubilder auf dem Server auf kleinstmögliche Dateigröße umgerechnet. Das "Gewicht" der Seiten kann also nicht durch (versehentlich) zu große hochgeladene Bilder ungünstig beeinflusst werden. Bei dieser Gelegenheit werden die Vorschaubilder auch gleich noch mit dem Lupensymbol, das die Möglichkeit der Vergrößerung symbolisiert, versehen.
Ergebnis: Ein Clip-Archiv mit beispielsweise 28 Clips kommt mit ca. 400 kB aus. Erfrischend in Zeiten von 3 MB+ Monsterseiten.

Nachtrag 18.01.2015:
Auf einem Smartphone (Android One) wiegt die gleiche Seite sogar nur 174 kB. RESS macht's möglich.

Für die "Vergrößerung" und die Präsentation der Videos sorgt (auf Desktop und Tablets) Fancybox, eine Lightbox-Variante, die ich bevorzuge, u. a. auch weil sie Screen Reader-Nutzer am wenigsten stört.
Ja, ich weiß, blinde Menschen sind nicht die Zielgruppe dieser Site, aber das ist für mich kein Argument, auf Barrierefreiheit a priori zu verzichten. Daher war es nur naheliegend, auch hier wieder "mein" barrierefreies responsives Dropdown-Menü einzusetzen.



2 Kommentare

  1. Bei deaktiviertem JS gehen weder die "Aufklappmenüs" auf, noch komme ich auf die erwartete(n) Seite(n).

    Des weiteren (falls man ohne JS über eine Suchmachine/ Link doch zufällig dort landet) werden die Vorschaubildchen der Videos (bspw. auf keimen.php) nicht angezeigt.

    Weiter geht das Spiel bei den Videos selbst, die wieder per JS eingebunden sind.

    Da 2015 "barrierefrei" dranzuschreiben finde ich recht grenzwertig.

    Kommentar von mike — Freitag, 16. Januar 2015 - 21:00 Uhr

  2. @mike

    Danke für deinen Kommentar.

    Es ist richtig, dass das Dropdownmenü auf JavaScript basiert, und folglich mit deaktiviertem Javascript nicht funktioniert.

    Auf diese Tatsache wird der geneigte Seitenbesucher ausdrücklich hingewiesen, falls er JavaScript deaktiviert hat. (Und wenn er weiß, wie man JavaScript deaktiviert, dann weiß er vermutlich auch, wie man es einschaltet.)

    Die Verwendung von JavaScript widerspricht übrigens gemäß WCAG 2.0 keinesfalls der Barrierefreiheit - und das bereits seit 2008.

    Ich hab' dennoch mal einiges geändert, damit die Site auch ohne JavaScript (zumindest eingeschränkt) funktioniert.

    Im übrigen ist mir klar, dass die Videos selbst nicht barrierefrei sind. Dies ist im Artikel auch nicht behauptet. Ich hätte darauf eventuell explizit hinweisen sollen.

    Kommentar von Fritz — Freitag, 16. Januar 2015 - 22:20 Uhr

Einen Kommentar abgeben

Damit Code-Beispiele richtig angezeigt werden, müssen Sonderzeichen maskiert werden (z.B. < zu &lt;).


(notwendig)

(notwendig)

Spamschutz:
Je nach Inhalt wird Ihr Kommentar eventuell nicht sofort angezeigt, sondern muss manuell freigeschaltet werden.

Archiv:

Kategorien:

Creative Commons Lizenzvertrag
Alle Texte (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE