Medien-Ordner und Medienliste (Audio/Video)

Medien-Ordner "Alles unter einem Dach: Neubau Kleine Fächer und Campusbibliothek" auf des Startseite www.geschkult.fu-berlin.de
Medien-Ordner "Alles unter einem Dach: Neubau Kleine Fächer und Campusbibliothek" auf des Startseite www.geschkult.fu-berlin.de
Bildquelle: http://www.geschkult.fu-berlin.de/
Medienliste "Expertengespräche"
Medienliste "Expertengespräche"
Bildquelle: http://www.zwangsarbeit-archiv.de/projekt/experteninterviews/

Medien-Ordner

Mit der Vorlage "Medien-Ordner" können Sie Audio- und Videomaterialien in Ihre Webseiten einbinden. 

Audio- und Videodateien liegen auf Grund ihrer Größe i.d.R. nicht im CMS sondern auf einem anderen Server der Freien Universität, dessen Domain auf .fu-berlin.de endet, z. B. auf dem CeDiS-Medienserver oder in einer Content Collection in Blackboard. Falls Ihre Einrichtung noch keinen Zugang zum CeDiS-Medienserver hat, kontaktieren Sie bitte unseren Support.

Falls Sie Videos von Externen Diensten wie z.B. Youtube oder Vimeo einbinden möchten, nutzen Sie bitte die Vorlage Einbindung externer Dienste.

Medien-Ordner sind eigenständige Webseiten, können aber auch als Inhaltselemente in Startseiten und in die rechte Spalte eingebunden werden.

Um eine auomatisch generierte Übersichtsliste der Medien-Ordner zu erstellen, platzieren Sie bitte die Medien-Ordner in einen Ordner mit der Vorlage "Medienliste".

Wie erstellt man einen Medien-Ordner?

  1. Laden Sie Ihre Audio- oder Videodateien in Ihr Verzeichnis auf dem CeDiS-Medienserver hoch.
  2. Erstellen Sie einen Ordner mit der Vorlage "Medien-Ordner".
  3. Unter "Alle bearbeiten" > "Anzeigeoptionen" > "Anzeige in der Navigation" können Sie einstellen, ob der Medien-Ordner in der Navigation angezeigt wird.
  4. Tragen Sie ins Feld "Externe Mediendateien (Audio/Video)" des Medien-Ordners den vollständigen Link Ihrer Audio- bzw. Videodatei ein, z.B. http://medien.cedis.fu-berlin.de/cedis_medien/projekte/cedis/cms/campus_tour.mp4

    Falls die Dateien auf dem CeDiS-Medienserver gespeichert sind, müssen sie im HTTP-Download-Bereich liegen, der Link ergibt sich dann wie folgt: http://medien.cedis.fu-berlin.de/<Ihr_Verzeichnis>/<ggf. weitere Unterordner>/<Ihre_Mediendatei>

    Option Wiedergabeliste:
    Wenn Sie mehrere Dateien verlinken, wird automatisch eine Wiedergabeliste (Playlist erzeugt), ein Beispiel finden Sie hier.

    Option HD-Schalter:
    Falls Sie Ihre Videos in mehreren Qualitäten produziert haben, können diese automatisch eingebunden werden, ein Beispiel finden Sie hier.

    Unterstützt werden folgende Video-Qualitäten: 144p, 240p, 360p, 480p, 720p  (Anzahl der Videozeilen, entspricht der Höhe in Pixel).

    • Speichern Sie die Dateien (../mein-video.mp4) auf dem Medien-Server entsprechend folgender Konvention im Dateinamen:
      ../mein-video_144p.mp4 für die  Video-Qualität "144p"
      ../mein-video_240p.mp4 für die  Video-Qualität "240p"
      ../mein-video_360p.mp4 für die  Video-Qualität "360p"
      ../mein-video_480p.mp4 für die  Video-Qualität "480p"
      ../mein-video_720p.mp4 für die  Video-Qualität "720p"
    • Verlinken Sie nur eine dieser Dateien im Feld "Externe Mediendateien (Audio/Video) ", diese wird dann als Standard voreingestellt, wir empfehlen eine mittlere Auflösung, z.B. 360p.
  5. Feld "Startbild" (optional)
    Verlinken Sie ein Bild, welches angezeigt wird, bevor das Video gestartet wird. Wir empfehlen, das Bild  ins CMS zu importieren, damit es entsprechend der gewünschten Größe(n) automatisch skaliert werden kann. Das Startbild wird auch in der Medienliste angezeigt.
  6. Feld "Beschreibung" (optional)
    Eine textuelle Beschreibung, die unterhalb des Players ausgegeben wird. Hier können auch Quellenangaben zum Video erfasst werden.
  7. Feld "Seitenverhältnis" (optional)
    Wählen Sie ggf. das Seitenverhältnis des Videos aus ("Breite:Höhe"; Standardwert: 16:9, bei älteren Videos auch 4:3).
  8. Feld "Max. Breite (in Pixel)" (optional)
    Die Eingabe eines Wertes ist nur für Videos geringerer Qualität nötig (z.B. "480"), damit das Video nicht im Inhaltsbereich hochskaliert wird.
  9. Im Medien-Ordner kann wie bei den meisten Vorlagen im Feld "Zusammenfassung" ein Text oberhalb des Players eingegeben werden, sowie ein weiterer Text unterhalb im Feld "Hauptinhalt".

Bitte beachten Sie, dass Sie Ihre Videos als MP4-Dateien im H.264 Codec exportieren, damit diese auf allen Plattformen abspielbar sind. Die Audio/Video-Dateien werden HTML5-kompatibel publiziert, damit sie auf den verschiedenen Plattformen dargestellt werden können.

HTML5-Kompatibilität prüfen

Sie können die Kompatibilität prüfen, indem Sie die Video-Datei direkt im Browser aufrufen, indem Sie die URL der Mediendatei in die Adresszeile eingeben. Erfahrungsgemäß tritt der Fehler nicht bei allen Browsern auf, zumeist jedoch im Firefox, so dass Sie diesen zum Testen nutzen können.

Flash-Videoformate

Falls Sie Flash-Videoformate (flv, fla) genutzt haben, empfehlen wir Ihnen, diese Video-Dateien umzukodieren, damit diese auch auf den Plattformen abspielbar sind, die kein Flash unterstützen.

Einbindung von Medien-Ordnern:

  • als textumflossene Audio-/Videoplayer im Hauptinhalt:
    Link auf den Medien-Ordner im Feld "Bilder" der entsprechenden Vorlage z.B. des Standard-Ordners.
  • als Inhaltselement einer Startseite mit zeilenbasiertem Layout (responsives Design):
    Startseiten-Ordner > "Alle bearbeiten" > Feldgruppe "Flexible Startseite (Responsives Design)" > Feld: "Inhaltselemente" > Link auf den Medien-Ordner (Lesen Sie weiter...)
  • als Inhaltselement einer Startseite mit flexiblen Layout (nicht-responsives Design):
    Startseiten-Ordner > Sammelordner für Inhaltselemente > Ordner für Inhaltselemente > Medien-Ordner
  • als Inhaltselement einer Startseite mit Standard-Layout:
    Startseiten-Ordner > "Alle bearbeiten" > Feldgruppe "Flexible Startseite (Responsives Design)" > Feld: "Inhaltselemente" > Link auf den Medien-Ordner
  • als Inhaltselement eines Content-Ordners:
    Content-Ordner > Ordner für Inhaltselemente des Content-Ordners > Medien-Ordner
  • als Element der rechten Spalte:
    Startseiten-Ordner > "Alle bearbeiten" > Feldgruppe: "Konfigurationseinstellungen" > Feld "Anzeige eigener Elemente" > Checkbox "Rechte Seite"
    Startseiten-Ordner > "Alle bearbeiten" > Feldgruppe "Erscheinungsbild" > Feld "Boxen der rechten Spalte" > Link auf den Medien-Ordner

Eigenschaften der Vorlage

  • Dateityp: Ordner
  • Eigenständige Webseite/Vorschau: Ja
  • Inhaltselement: Ja. Einbindung als Content-Bild, sowie in Startseiten, Content-Ordner, Content-Startseiten und die rechte Spalte
  • Liste: Ja, Element einer Medienliste.
  • Design der Website: responsives und nicht-responsives Design
  • Bilder: ein optionales Startbild, auch für Audio.
  • Text: Zusammenfassung, Beschreibung, Hauptinhalt

Medienliste (Audio/Video)

Mit dieser Vorlage wird automatisch ein Verzeichnis der darunterliegenden Medien-Ordner bzw. eine Galerieansicht generiert. Die Vorlage empfiehlt sich insbesondere für Video- und Audioarchive.

Darstellung der Medienliste:

1 - Linkliste

Die Medienliste besteht aus Links auf die darunterliegenden Medienordner. Als Linktitel wird der Titel des jeweiligen Medienordners angezeigt.

2 - Medienliste mit Vorschau

Die Medienliste besteht aus folgenden Elementen (pro Medien-Ordner):

  • Ein verkleinertes Startbild des Medien-Ordners bzw. ein Standardbild für Video- oder Audio-Dateien mit einem Playersymbol. Ein Klick darauf öffnet die Seite des Medien-Ordners mit dem Player und detaillierten Angaben. Der Player wird automatisch gestartet.
  • Ein Link zum Medien-Ordner. Als Linktitel wird der Titel des Medienordners angezeigt.
  • Die Zusammenfassung des Medien-Ordners

Beispiele von Medienlisten

Eigenschaften der Vorlage

  • Dateityp: Ordner
  • Eigenständige Webseite/Vorschau: Ja
  • Inhaltselement: Nein
  • Liste: Ja. Elemente: Medien-Ordner.
  • Design der Website: responsives und nicht-responsives Design
  • Bilder: Startbilder der Medienordner
  • Text: Zusammenfassung, Hauptinhalt, sowie Titel und Zusammenfassungen der Medien-Ordner
request.remote_ip=54.162.115.179
request.port=80