Video-Test

Testseite für HTML5-Videos

Variante 1: Mittels (veraltetem?) Html5Mediator-Plugin

Das Html5Mediator-Plugin scheint ein leichtgewichtiges Plugin zu sein, dass im Grunde ausreichen dürfte. Es führt ein generisches <html5media>-Tag ein.

Leider ist das seit 2013 nicht mehr weiterentwickelt worden. Insofern ist ggf. zu prüfen, ob hier irgendwelche Sicherheitslücken vorliegen könnten. Es müsste zudem minimal angepasst werden, dass es via "wfLoadExtension" statt dem alten "require_once" geladen werden kann.

• Video-Quelle wird zwischen dem öffnenden und schließenden <html5media>-Tag angegeben
• Es kann sowohl für lokale Dateien (File:...) als auch Remote-Videos/URLs (http(s)://...) genutzt werden.
• Mittels URL sind auch Dienste wie youtube möglich, solange die URL als solche direkt ein Video repräsentiert.
• die Größe kann mittels width=... bzw. height=... definiert werden, mit Erhalt der Aspect Ration
• Bei Kombination von height=... und height=... wird der Video-Rahmen vertikal beschnitten bzw. erhält einen weißen Rand hinzu.
• Auf dem Desktop (zumindst unter Firefox) wird automatisch eine Voransicht angezeigt. Bei Mobilgeräten offenbar nicht. Ein Vorschaubild kann aber explizit angegeben werden über den Parameter poster="..."

<html5media width="300">File:Nextcloud.mp4</html5media>

<html5media height="200" poster="https://www.dornheim-medical-images.de/uploads/tx_imagecycle/2.png">https://test1.anatomy.dornheim.cloud/images/e/ef/Nextcloud.mp4</html5media>

<html5media height="200">https://www.youtube.com/watch?v=riZAzvyRNlw</html5media>

---

Variante 2: Mittels EmbedVideo-Plugin

Variante 2a: [[File]]-Tag (für lokale Dateien)

Das EmbedVideo-Plugin hängt sich automatisch in die Hook für den [[File]]-Tag rein. Dies ist also bestens geeignet für lokale Dateien. (Im übrigen ist dies auch der aktuelle Standard-Weg zum Einbetten von Bildern; das bisherige [[Image]]-Tag ist eigentlich outdated...)

Ohne weitere Optionen wird das Video in der Originalgröße eingebettet. Wahlweise kann eine Breitenangabe z.B. |400px getätigt werden:

[[File:Nextcloud.mp4|300px]]

Datei:Nextcloud.mp4

Eine reine Höhenangabe z.B. |x300px funktioniert dagegen nicht. Eine kombinierte Angabe z.B. |300x300px führt nicht zur Veränderung der AspectRatio des Videos, sondern dazu, dass ggf. oben und unten ein weißer Rand ergänzt wird.) Abgesehen von der nicht möglichen Änderung der Aspect Ration sollten die übrigen von den Image Tags bekannten Formatierungsangaben funktionieren:

[[File:Nextcloud.mp4|300x300px|center|thumb|foo]] Datei:Nextcloud.mp4

---

Variante 2b: klasissches {{#ev}}-Parser-Tag

Diese Notations-Variante ist für Videos bei externen Dienstleistern gedacht. Folgende Notationen sind möglich:

• {{#ev:service|id}}
• {{#ev:service|id|dimensions}}
• {{#ev:service|id|dimensions|alignment}}
• {{#ev:service|id|dimensions|alignment|description}}
• {{#ev:service|id|dimensions|alignment|description|container}}
• {{#ev:service|id|dimensions|alignment|description|container|urlargs}}
• {{#ev:service|id|dimensions|alignment|description|container|urlargs|autoresize}}
• {{#ev:service|id|dimensions|alignment|description|container|urlargs|autoresize|valignment}}

{{#evt: service=youtube |id=riZAzvyRNlw |alignment=right |dimensions=500 }}

Für den Parser-Tag gibt es auch eine Template-Variante #evt.

Diese ermöglicht es, Key-Value-Paare anzugeben:

{{#evt:
service=youtube
|id=riZAzvyRNlw
|alignment=right
|dimensions=500
}}

Alternativ gibt es für den Parser-Tag gibt auch noch eine URL-Variante#evu.

Bei dieser wird der Service aus der URL geparsed:

{{#evu:https://www.youtube.com/watch?v=riZAzvyRNlw
|alignment=right
|dimensions=500
}}

---

Variante 2c: <evlplayer> Hook-Tag für Video-Container

Im Rahmen der Rückwärtskompatibilität wird ferner die frühere Tag-Variante <evlplayer> unterstützt. Wenn man Tags mit spitzen Klammern präferiert, kann man also auch diese nehmen.

Das <evlplayer>-Tag kann ganz normal genutzt werden, um ein Video innerhalb der Seite einzubetten:

<evlplayer service="service" id="player id" w="width" h="height" class="class" style="style">default content</evlplayer>

Die Angabe von Höhe und Breite ist möglich, wobei nur die Breite tatsächlich zu einer Skalierung führt, während anhand der Höhenangabe die Ansicht einfach vertikal. beschnitten bzw. erweitert wird.

Z.B.: <evlplayer id="player1" w="400" h="300" service="youtube" defaultid="riZAzvyRNlw" />

<evlplayer id="player1" w="400" h="300" service="youtube" defaultid="riZAzvyRNlw" />

---

Variante 2d: Service-individuelle Hook-Tags, z.B. <youtube> für Video-Container

Die Extension EmbedVideo bietet Unterstützung für eine Vielzahl an Services, wie z.B. youtube, vimeo, jwplayer, teacherTube etc. (siehe Übersicht). Dort braucht man dann jeweils nur die angeben.

Zur Vereinfachung führt EmbedVideo für jeden Service einen eigenen benannten Tag ein. Eine Größenangabe o.ä. scheint hier aber nicht möglich zu sein.

<youtube>https://www.youtube.com/watch?v=riZAzvyRNlw</youtube>

<youtube>https://www.youtube.com/watch?v=riZAzvyRNlw</youtube>

---

Variante 3: Mittels eigenem Plugin

3.1 Video vom Wiki-eigenen Server:

<video-embedding width="400px" height="300px" poster="File:Unbenannt10.png">File:Nextcloud.mp4</video-embedding>

<video-embedding width="400px">File:Nextcloud.mp4</video-embedding>

<video-embedding height="300px">File:Nextcloud.mp4</video-embedding>

<video-embedding src="File:Nextcloud.mp4" width="400px" height="100px" poster="File:Unbenannt10.png"/>

<video-embedding src="File:Nextcloud.mp4" width="400px" height="300px" poster="File:Unbenannt10.png"/>

<video-embedding src="File:Nextcloud.mp4" poster="File:Unbenannt10.png" style="width:400px;height:300px;"/>

<video-embedding src="File:Nextcloud.mp4" poster="File:Unbenannt10.png" width="" style="height:;"/>

<video-embedding src="File:Nextcloud.mp4" poster="File:Unbenannt10.png" style="width:200px;"/>

<video-embedding src="File:Nextcloud.mp4" poster="File:Unbenannt10.png" style="height:100px;"/>

<video-embedding src="File:Nextcloud.mp4" poster="File:Unbenannt10.png"/>

<video-embedding src="file:Nextcloud.mp4" poster="file:Unbenannt10.png"/>

<video-embedding src="File:Nextcloud.mp4"/>

3.2 Video von Youtube:

<video-embedding width="400px" style="height:200px;">https://www.youtube.com/embed/riZAzvyRNlw</video-embedding>

<video-embedding height="200px" style="width:400px;">https://www.youtube.com/embed/riZAzvyRNlw</video-embedding>

<video-embedding style="width:400px;height:200px;" poster="File:Unbenannt10.png">Youtube:riZAzvyRNlw</video-embedding>

<video-embedding src="Youtube:riZAzvyRNlw" poster="File:Unbenannt10.png" style="width:400px;height:200px;"/>

<video-embedding src="Youtube:riZAzvyRNlw" poster="File:Unbenannt10.png" style="width:;height:;"/>

<video-embedding src="Youtube:riZAzvyRNlw" poster="File:Unbenannt10.png"/>

<video-embedding src="youtube:riZAzvyRNlw" poster="file:Unbenannt10.png"/>

<video-embedding src="Youtube:riZAzvyRNlw"/>

---

Fazit

Die Html5Mediator-Extension scheint ein leichtgewichtiges Plugin zu sein, dass im Grunde ausreichen dürfte. Da es schon seit 6 Jahren nicht mehr weiterentwickelt wird, ist eine Obsoleszenz beizeiten nicht unwahrscheinlich. Zudem sollte man prüfen, ob hier irgendwelche Sicherheitslücken vorliegen könnten. Es müsste zudem minimal angepasst werden, dass es via "wfLoadExtension" statt dem alten "require_once" geladen werden kann.

Die EmbedVideo-Extension scheint hier deutlich aktueller zu sein. Sie bietet eine Unterstützung für verschiedene Services, aber inwiefern dies erforderlich ist und wir nicht einfach direkt die URLs einbauen können, ist nicht ganz klar.

EmbedVideo soll neben dem Einbetten von Videos auch mit einer Video-Verlinkung direkt zum Service daherkommen. Außerdem soll es möglich sein, wikiseitig Playlists definieren. Das habe ich aber beides bisher nicht zum Laufen bekommen.

Demgegenüber kann man bei Html5mediator externe Videos auch ohne Service einbinden; das könnte für unseren Cloud-Ansatz der schnellere Ansatz sein.