Hinweise zum Einbinden von Videos in UniBw-Webportale

Für das Einbinden von Videos steht seit Plone4 kein spezielles Objekt mehr zur Verfügung.
Wenn Sie ein Video in eine Ihrer Seiten einbinden möchten, ist dies über das Einfügen von entsprechendem HTML-Code in den Quelltext möglich - durch Nutzung der HTML5-Tags ("<embed>" oder "<video>") oder durch Laden eines Players.

Bitte bedenken Sie, dass die Webportale der Universität der Bundeswehr München BITV-konform, d.h. "barrierefrei" sein müssen! Binden Sie Videos ein, heisst dies, dass das Video NICHT die Hauptinformation der Seite beinhalten, sondern nur als ergänzende Informationsquelle dienen sollte.
["Ein Bild sagt mehr als tausend Worte" … BITV fordert hier nun, dass Sie auch mindestens diese 1000 Worte schreiben.]

Achtung

Ein gravierendes Manko ist, dass www.unibw.de im September 2012 gut 20 Prozent Besucher mit Internet Explorer 8 (und kleiner) hatte, bei denen beispielsweise das <video>-Tag vollständig ignoriert wird.
Das zeigt insbesondere, dass keine der nachfolgend vorgestellten Methoden perfekt ist; d.h. nicht alle Nutzer können Videos sehen.

Datei- bzw. Medienspezifisches

Video-Dateien sind gross. Das nachfolgende Beispiel der "Möglichkeit 1" wurde als "mp4" erzeugt. Die 13 Sekunden benötigen 6,1 MBytes. Mit dem Linux-Tool "OggConvert" wird mit dessen Standardvorgaben daraus eine ".ogv-Datei" mit 13,6 MBytes bzw. eine ".webm-Datei" mit 7,5 MBytes. Im Hochschulnetz macht diese Grösse kaum Probleme aber bei langsamen DSL-Verbindungen kommt es zu erheblichen Wartezeiten für die Nutzer.

Keines der verwendeten Video-Formate speichert verlustfrei. Insbesonders bei Konversionen zwischen den Formaten treten weitere Verluste auf, die sich in der Qualität bemerkbar machen (können).
Daher soll möglichst das Originalformat verwendet werden.

Empfehlung:
laden Sie die Videodatei nicht in Ihr Webportal, sondern auf den Dokumentenserver BSCW und setzen Sie im Webportal die entsprechende Adresse im HTML-Code ein.

Möglichkeiten zum Einbinden von Videos

Im Folgenden werden drei Möglichkeiten zum Einbinden von Videos vorgestellt. Der jeweils unter dem Video-Fenster angezeigte HTML-Code muss dazu in den Quellcode Ihrer Seite eingefügt werden. Die Testvideos sind als Download verfügbar (siehe rechte Spalte) und müssen zum Einbinden in Ihr Webportal geladen werden.

Schritt 1: Laden Sie die beiden Test-Videos der rechten Infospalte herunter

Schritt 2: Laden Sie die Videos mit dem Quickuploader in Ihr Webportal

Schritt 3: Kopieren Sie den angezeigten HTML-Code

Schritt 4: Öffnen Sie in Ihrem Editor die Quellcode-Ansicht (Button oben Links)

Schritt 5: Fügen Sie den kopierten HTML-Code ein

Schritt 5: Passen Sie im eingefügten HTML-Code die Adresse Ihrer Videodatei an

Vorbemerkung zu den Varianten

Derzeit bietet die Möglichkeit 1 die besten Erfolgsaussichten. Die Möglichkeit 3 dürfte sich jedoch durchsetzen, wenn Browser der Generation Internet Explorer 8 und älter außer Gebrauch kommen.

• Die Möglichkeit 1 und 3 fordern HTML5-Fähigkeiten, die noch nicht bei allen Browsern verfügbar sind.
• Bei Möglichkeit 1 muss der Nutzer zusätzlich für ein passendes Plugin sorgen.
• Bei Möglichkeit 3 muss der Browser eines mit "<source ...>" angegebene Format darstellen können; d.h. man braucht mehrere Formate. Es gibt jedoch den "optischen Fallback" auf ein Titelbild.
• Möglichkeit 2 funktioniert nur bei Flash-Videos. Außerdem muß server-seitig, bei uns also durch Sie als Portal-Administrator, immer ein aktuelles Programm vorgehalten werden. (Der hier angegebene Link sollte aber immer auf eine aktuelle Version zeigen ...)

Möglichkeit 1: <embed>-Tag aus html5

<embed height="315" width="560"
src="http://www.unibw.de/rz/dienste/webauftritt/dokumentation-zentraler-webserver/rz.mp4">
</embed>

Achtung: Plugins gefordert!
Diese Methode unterstellt/fordert, dass im Browser ein geeignetes Plugin installiert ist; z.B. VLC-Player, Apple Quicktime, gstreamer, …

Möglichkeit 2: Laden und Einbinden eines Players

<object align="left"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
height="200" width="200">
<param name="loop" value="false" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="movie"
value="http://www.unibw.de/…/dergecko.swf" />
<embed height="200" loop="false"
pluginspage="http://www.macromedia.com/go/getflashplayer"
quality="high"
src="http://www.unibw.de/…/dergecko.swf"
type="application/x-shockwave-flash"
width="200" wmode="opaque">
</embed>
</object>

Möglichkeit 3: <video>-Tag aus html5

HTML 5 liefert ein Video-Tag. Um alle modernen Browsern gerecht zu werden, sollte man das Video in .webm- und .ogv-Format anbieten.
Die Bearbeitung des entsprechenden HTML-Dokuments funktioniert nur leidlich, da der CK-Editor derzeit damit schlecht umgehen kann:
(Es werden schließende "</source>" vor dem abschließenden "</video>" eingefügt. Alternativ könnte man den Editor "Keiner" verwenden.)

Achtung:
implizite Forderung nach HTML5-Video-Funktionalität

<video poster="/stat/signet_unibw_240x45.png" controls="controls" tabindex="0" height="315" width="560">
 <source src="….mp4" type="video/mp4" >
 <source src="….webm" type="video/webm" >
 <source src="….ogv" type="video/ogg" >
</video>

Das erste mit <source> genannte Format, das der Browser "versteht", wird benutzt.
Wenn keines passt, wird das mit "poster=… " genannte Titelbild angezeigt.
Das Attribut preload="preload" könnte das Laden der Vidoe-Daten vorzeitig initiieren.
Das Attribut autoplay="autoplay" startet das Video sofort.