Audio und Video für HUGO

Als ich meinen Reiseblog mit dem Static Site Generator HUGO aufgesetzt habe, ist mir ziemlich schnell aufgefallen, dass von Haus aus keine Unterstützung für Audio und Video Elemente geboten wird. Das lässt sich aber mit ein paar einfachen HTML Templates lösen, die im HUGO Universum Shortcodes genannt werden. Ich nutze hier die standard HTML 5 <audio> und <video> Tags, aber da kann man nach belieben auch komplexere Implementierungen wählen.

Die HTML-Dateien audio.html und video.html müssen im Unterordner layouts/shortcodes hinterlegt werden.

<audio controls="true" preload="none" style="width: 100%;">
    <source src="{{ .Get 0 }}">
</audio> 

<video controls="true" preload="none" poster="{{ .Get 1 }}" style="width: 100%;">
    <source src="{{ .Get 0 }}">
</video>

Die Templates können dann schon im Post genutzt werden und die übergebenen Parameter werden in die Platzhalter eingefügt. Der Basename der HTML-Dateien bestimmt den Namen des Shortcodes.

Ein Song, der nicht auf Soundcloud gehostet wird:
{{< audio "/Beispiel.mp3" >}}

Ein Video, dass nicht auf Youtube gehostet wird:
{{< video "/Beispiel.mp4" "/Thumbnail.jpg" >}}

Genau wie Bilder, müssen die Audio- und Videodateien im Ordner static platziert werden. Meiner Meinung nach super intuitiv und schick sieht es auch noch aus! Hier das Ergebnis für ein Video: