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.

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

<html5media height="200">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
}}

• Vorteil*: Im Gegensatz zur Html5Mediator-Extension kann man bei der EmbedVideo-Extension auch Wikiseitig Playlists definieren:

{{#evl:youtube|riZAzvyRNlw,gamVBPrYIKc}}

{{#evl:pSsYTj9kCHE,pSsYTj9kCHE,pSsYTj9kCHE|Play All|player=example-player}}

---

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>