JoomGallery Testseite - Videos einbinden

Drucken

Mit dieser 'kleinen' Anpassung können innerhalb der JoomGallery Videos angezeigt werden. Dazu wird bei dem jeweiligen Bild eine "Video-id" gespeichert.

Die Videos werden dabei per iframe eingebunden. Es wird bei keinem der Dienste eine API mit irgendwelchen Keys benötigt. Es werden folgende Formate/Dienste unterstützt:

- Für "Selbsthoster" die HTML5-Videoformate MP4, webM oder Ogg.

- Alternativ können Videos aus YouTube, Vimeo oder Facebook eingebunden werden.

Für YouTube-Videos kann die Video-id wahlweise in einer der folgende Formen eingegeben werden:

- Der komplette url: https://www.youtube.com/watch?v=hZd4AgwhoEQ

- Der Einbettungscode, wie er direkt von YouTube angeboten wird: https://www.youtube.com/embed/hZd4AgwhoEQ

- Die reine id, also nur das hier Fett markierte: https://www.youtube.com/watch?v=hZd4AgwhoEQ

In der Detailansicht das Detailbild durch das Video ersetzt.
Wird die Detailansicht nicht genutzt, wird das Video in einer Standard-Modalbox angezeigt. Die ist dann notwendig, wenn das (Original-)Bild direkt aus der Kategorieansicht aufgerufen wird.

Über Einstellungen im Konfigurations-Manager kann der Videodienst/Format (MP4, webM, Ogg, YouTube, Facebook oder Vimeo) ausgewählt werden. Außerdem können zusätzliche Parameter wie z.B. die Videogröße eingestellt werden.

Was notwendig ist:

Es muss bereits ein Bild vorhanden sein, um diesem die Video id zu hinterlegen.

Probleme/Einschränkungen:

Die "Bildinformationen" beziehen sich natürlich das auf das "Dummy-Bild", nicht auf das Video. Folglich machen viele dieser Angaben hier keinen Sinn. Hier auf der Seite werden deshalb die Download- und Slideshow-Buttons in der Detailansicht für Videos abgeschaltet.
Allgemeine Angaben wie "Es befinden sich 6 Bilder in diese Kategorie" kann man evtl. in "Es befinden sich 6 Bilder/Videos in diese Kategorie" ändern. Dies würde aber Änderungen in den Sprachdateien bedeuten. Die wichtigsten Sprachkonstanten habe ich hier auf der Seite per Sprachoverride angepasst.

Etwas 'frickelig' war die Anzeige des Play-Icons über dem Thumbnail, wenn ein Video hinterlegt ist. Teilweise mussten divs hinzugefügt und mit position: absolute/relative positioniert werden. Dafür sieht es jetzt ganz gut aus.