Videos in Webseiten einbetten

Diese Anleitung richtet sich an Betreiber von Webseiten. Es ist dabei egal, ob die Webseite handgestrickt ist oder mit einem CMS (also mit WordPress). Es geht darum, wie man Video- oder auch Audio-Files auf einer Webseite einbetten kann. Es gibt sehr viele verschiedene Video-Formate. Einigen wir uns der Einfachheit halber darauf, dass mit mit .mp4-Dateien arbeiten.

Bevor wir überhaupt mit dem Einbetten beginnen. In vielen Fällen genügt ein direkter Link in einem neuen Fenster, dann kann man viel der hier geschilderten Maßnahmen vergessen. Daher wurde sowohl im Abschnitt um die „Einbettung in YouTube“ als auch bei der „Einbettung vom eigenen Server“ der direkte Links an den Anfang gestellt.

Videos auf Webseiten publizieren ist sehr einfach geworden. Es gibt grundsätzlich zwei verschiedene Herangehensweisen. Man kann das Video am eigenen Server speichern oder man kann das Video auf einem fremden Server (beliebt ist YouTube) speichern. Letztere Methode hat viele Vorteile, daher empfehlen wir sie grundsätzlich.

Speichert man ein Video auf YouTube, ist das ursprüngliche Format egal, was downgeloadet wird ist immer im .mp4-Format. Die Speicherung ist kostenlos und belastet weder das eigene Webspeicherkonto, noch belastet es unseren Server beim Aufruf. Das ist schon einmal sehr freundlich. Darüber hinaus hat man für die eigenen Videos zwei Plattformen: die eigene Homepage, in der das Video mit einm Kommentar versehen werden kann und die auf YouTube gespeicherten Version. Diese öffentlichen Versionen kann man gegen unerwünschte Einsicht auch sperren, indem man sie nicht „öffentlich“ sondern „nicht gelistet“ freigibt. Die Einbettung auf der eigenen Seite erfolgt über das Kodeschnipsel eines iframe-Konstrukts, das auf der YouTube-Seite kopiert werden kann.

Für das Speichern am eigenen Server spricht, dass man es zum Beispiel aus Gründer der Firmenpolitik nicht möchte, dass die eigenen Daten irgendwo auf der Welt verteilt sind. Speichert man also ein Video auf dem eigenen Server (zum Beispiel am ClubComputer-Server) kann das etwas komplizierter sein. Zuerst empfiehlt es sich, alle Videos in ein einheitliches Format zu bringen, es also YouTube gleich zu tun. Dann muss man sich darum kümmern, dass die gewählte Endung, also .mp4, auch vom Server verstanden wird. Das heißt, dass bei Anforderung einer Datei mit der Endung .mp4 der Server mit dem richtigen MIME-Typ video/mp4 antwortet. Ob das der Fall ist, hängt vom Baujahr des Servers ab. Unser Server zum Beispiel kennt diese Endung noch nicht und man muss sie ihm über die Konfigurationskonsole bekannt machen. Schließlich bettet man das Video über ein video-Tag, ein iframe-Tag oder bei WordPress-Seiten über Einfügen -> AddMedia ein.

In der Folge werden beide Möglichkeiten Schritt für Schritt beschrieben. Als einzubettendes Video dient uns ein sehr kurzes Video von Pixabay mit dem Namen pixabay-demo.mp4.

Video auf YouTube gespeichert

Direkter Link

Wenn man ein Video auf YouTube hochlädt, kann man es unter einem eindeutigen Link ansprechen. In unserem Beispiel ist es folgender Code:

[code lang=“html“]
<a href="https://youtu.be/pXG9EUGJViM" rel="noopener" target="_blank">https://youtu.be/pXG9EUGJViM</a>
[/code]

https://youtu.be/pXG9EUGJViM

Mit diesem Code öffnet sich ein neues Fenster, in dem das Video abgespielt wird.

Einbettung

YouTube-Videos sind entweder Öffentlich, Nicht gelistet oder Privat. Hat man ein Video über den Upload-Button hochgeladen, werden die wichtigsten Angaben über „Video bearbeiten“ im Video-Manager eingetragen; das ist ein Name, eine Beschreibung, der Grad der Öffentlichkeit (öffentlich, nicht gelistet, privat). Auf der Seite kann man auch einen eindeutigen Link zu dem Video kopieren.

Nehmen wir an, wir hätten eine Seite, in der in einer Liste auf 10 Videos verzweigt werden soll, dann würde man bei jedem Klick ein neues Fenster (oder Tab) öffnen. Das kann schnell unübersichtlich werden. Man kann das vermeiden, indem man das Attribut target="_blank" durch target="MeinFenster" ersetzt. Der erste Aufruf eines Videos landet in einem neuen Fenster (oder Tab). Dieses Fenster bekommt aber den Namen MeinFenster und alle folgenden Aufrufe überschreiben den dortigen Inhalt, wodurch die Browseranordnung überschaubar bleibt. Es hängt aber natürlich von der gewünschten Wirkung ab, ob man alle Videos in getrennten Fenstern/Tabs öffnet oder im selben.

Einbettung des YouTube-Videos

Wenn man ein Video nach YouTube upgeloadet hat, sieht man die Einstellungen des dortigen Video-Managers:

Der Unterschied zwischen „öffentlich“ und „nicht gelistet“ ist, dass ein zufälliger Besucher nur die auf „öffentlich“ eingestellten Videos finden kann. Die „nicht gelisteten“ können zwar genau so wie die öffentlichen über den Link abgerufen werden, sind aber ansonsten nicht zu sehen.

Um das Video auf anderen Seiten einbetten zu können, befindet sich auf dem Video ein „Teilen“-Symbol.

Klickt man es an, findet man zuerst die populärsten Zielseiten Facebook, Twitter und Google+ aber auch ein „Weiter“-Symbol „…“…

…das weitere Kanäle anbietet aber auch den Link „Einbetten“:

Dieser Link generiert einen kurzen HTML-Code, den man über vier Checkboxen noch parametrieren kann.

Dieser Einbettungscode schaut so aus:

[code lang=“html“]
<iframe width="560" height="315" src="https://www.youtube.com/embed/pXG9EUGJViM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>
[/code]

Diesen Kode fügt man an der gewünschten Stelle in die eigene Webseite ein, also zum Beispiel gleich nach diesem Text:

Video lokal gespeichert

Wer sein Web „zu Fuß“, also als eine Sammlung von Html-Dateien, entwickelt, lädt die die Video-Datei mit Ftp in einer Ordner seiner Wahl, da gibt es ja keine Einschränkungen. Wer mit WordPress-arbeitet, muss zunächst dafür sorgen, dass eine .mp4-Datei auch über den Media-Manager upgeloadet werden kann. In der Grundeinstellung muss das nicht unbedingt möglich sein. Wer aber einen der zahlreichen Media-Manager installiert hat, findet diese Einstellungen dort.

Zieht man die .mp4-Datei in die Entwurfsoberfläche von WordPress, sieht man einen Fehler, der besagt, dass das Format nicht unterstützt wird. Man muss WordPress dazu bringen, den gewünschten Typ .mp4 zum Upload zuzulassen. Hinweise im WordPress-Handbuch.

Hat man es dann geschafft, die Datei auf den Server zu bringen und fügt man sie in WordPress mit „Einfügen“ -> „Add Media“ oder mit einem Kodeschnipsel in eine gewöhnliche HTML-Seite ein, wird es so sein, dass man wieder eine Fehlermeldung bekommt:

Man schaut im Media-Manager nach und kopiert dort den Link zu der .mp4-Datei:

…und gibt diesen Link direkt im Browser ein:

Man bekommt einen sonderbaren Fehler, dass nämlich die Datei nicht gefunden wurde, obwohl sie nachweislich gerade upgeloadet wurde und andere Dateien in diesem Verzeichnis sehr wohl angezeigt werden. Der Grund dafür ist, dass der Server diese Dateiendung .mp4 nicht kennt und daher nicht weiß, welchem MIME-Typ er dem Browser melden soll. Also sagt er gar nichts, für ihn ist die Datei einfach nicht da.

Die Serveradministration von ClubComputer ist das WebSitePanel (https://panel.ccc.at). Das Panel erlaubt die Konfiguration zusätzlicher MIME-Typen unter Websites -> DeineDomäne -> MIME-Types. Dort fügt man ein .mp4 = video/mp4. (Nicht auf „Speichern“ vergessen!) Zur Information: Alle diese Einstellungen merkt sich der Server in der Datei DeineDomäne/wwwroot/web.config im Abschnitt system.webServer/staticContent. Schaut man sich diese Datei an, steht dort sinngemäß folgendes:

[code lang=“xml“]
<configuration>
<system.webServer>
<staticContent>
<remove fileExtension=".mp4" />
<mimeMap fileExtension=".mp4" mimeType="video/mp4" />
</staticContent>
</system.webServer>
</configuration>
[/code]

Wenn sich jemand darüber wundert, dass zuerst mit remove etwas entfernt wird, was gar nicht da ist, hat das schon seinen Zweck. Heute ist es noch so, dass der Server diese Dateiendung nicht unterstützt, aber es kann sein, dass durch ein Update oder durch eine Einfügung des Administrators sie Endung serverseitig ergänzt wird und dann würde in der Zeile mimeMap etwas hinzugefügt werden, was schon da ist, und die Suche nach diesem Fehler wäre wieder sehr mühsam. Daher also wird prophylaktisch die Endung zuerst mit remove entfernt und danach mit mimeMap wieder eingefügt.