Versionen im Vergleich

Alte Version 1

changes.mady.by.user Tobias Kilgus

Gespeichert am

verglichen mit

Neue Version Aktuell

changes.mady.by.user Tobias Kilgus

Gespeichert am

Schlüssel

  • Diese Zeile wurde hinzugefügt.
  • Diese Zeile wurde entfernt.
  • Formatierung wurde geändert.

Beschreibung

Auf dieser Seite erfahren Sie, wie sich Audios und Videos in einer Wikiseite - insbesondere solche, die auf dem Medienserver der Freien Universität vorliegen - einbetten lassen.

Generelle Informationen zum Einsatz des Medienplayers an der Freien Universität Berlin erhalten Sie auf dieser Webseite.

Einer für alle

Das Center für Digitale Systeme (CeDiS) der Universitätsbibliothek hat auf Basis von HTML5 und der Open-Source-Software Video.js einen FU-eigenen Medienplayer entwickelt, der die Einbindung von digitalen AV-Inhalten in den zentralen webbasierten Systemen der Freien Universität ermöglicht.

Digitale Videos und Audios können somit auf verschiedensten Endgeräten optimal (responsiv) wiedergegeben werden.

Das Makro "Video Player" ermöglicht die Integration des Medienplayers in Wikiseiten.

Hierüber ist das einfache Anlegen von Wiedergabelisten sowie die automatische Einbindung von unterschiedlichen Video-/Audioqualitäten, Untertiteln, Startbildern und Kapitelsprungmarken möglich. 

Der zentral gehostete FU-Medienplayer ist in den folgenden webbasierten Systemen mit einheitlichen Funktionen verfügbar: Lernplattform Blackboard, Content Management System, Open Distributed Campus sowie Wikis und Blogs. 

Beispiele Implementierung

Video Player
id1


Video Player Element (Video Player Sub-Element)
filehttps://medien.cedis.fu-berlin.de/html5/sets/set6_mp4_playlist_quality_ut_poster/profund_innovation_720p.mp4
qualities["720p","720p"],["144p","144p"],["240p","240p"],["360p","360p"],["480p","480p"],["1080p","1080p"]
titleBeispiel Video
posterhttps://medien.cedis.fu-berlin.de/html5/sets/set6_mp4_playlist_quality_ut_poster/profund_innovation_poster.jpg
descDies ist ein Beispielvideo mit unterschiedlichen Qualitäten, einem deutschen Untertitel sowie einem Startbild.


Untertitel / Kapitel / Beschreibungs - Element (Video Player Sub-Element)
langcodede
srchttps://medien.cedis.fu-berlin.de/html5/sets/set6_mp4_playlist_quality_ut_poster/profund_innovation_720p.mp4
vtthttps://medien.cedis.fu-berlin.de/html5/sets/set6_mp4_playlist_quality_ut_poster/profund_innovation_DE.vtt


Video Player Element (Video Player Sub-Element)
filehttps://medien.cedis.fu-berlin.de/html5/sets/set6_mp4_playlist_quality_ut_poster/2016-Campus-Management_192k.mp3
qualities["192k","192k"],["128k","128k"],["160k","160k"],["256k","256k"],["320k","320k"]
titleBeispiel Audio
typeaudio
posterhttps://medien.cedis.fu-berlin.de/html5/check/mein-audio_poster.jpg
descDies ist ein Beispielaudio mit verschiedenen Qualitäten, einem deutschen Untertitel sowie einem Startbild.


Untertitel / Kapitel / Beschreibungs - Element (Video Player Sub-Element)
langcodede
srchttps://medien.cedis.fu-berlin.de/html5/sets/set6_mp4_playlist_quality_ut_poster/2016-Campus-Management_192k.mp3
vtthttps://medien.cedis.fu-berlin.de/html5/sets/set6_mp4_playlist_quality_ut_poster/2016-Campus-Management_DE.vtt




Info
iconfalse
  • Mit dem Makro "Video Player Box" können Sie eine Wiedergabeliste (Playlist) mit Audio- und Videodateien in Ihre Wikis Wikiseite einbinden.
  • In dieser Anleitung erhalten Sie ausführliche Informationen zu Bedienung und Funktionen des "Video Player Box" im Wiki.
  • Eine kurze Einleitung, wie Sie eine Playlist den Medienplayer in Ihr Wiki einfügen, finden Sie hier.

Erstellen einer Playlist

  • Laden Sie Ihre Audio- oder /Videodateien in Ihr Verzeichnis auf dem den CeDiS-Medienserver oder einem einen anderen Server der Freien Universität Berlin hoch oder stellen Sie einen Audio-/Videostream auf einem Streaming-Server bereit. Bei diesem Schritt unterstützt Sie das Medienteam des Center für Digitale Systeme (CeDiS).
  • Klicken Sie im Editor (Wikiseite im Bearbeitungsmodus) auf "Weiteren Inhalt einfügen" und wählen das Makro "Video Player Box" aus. 
  • Vergeben Sie eine "Player-ID" für Ihre Playlist. Geben Sie z. B. ein: pl1, pl2 etc.
  • Speichern Sie die Einstellung. Durch Klicken auf das "Video Player"-Makro und die Auswahl von "Bearbeiten" können Sie die Einstellungen erneut verändern.


Warnung
  • Die Player-ID wird unbedingt benötigt, weil diese Ihre Playlist eindeutig identifiziert und definiert. 

...

Tipp
  • Sie haben die Möglichkeit, die automatische Wiedergabe (Autoplay) des nächsten Playlist-Elements (Video oder Audio) zu aktivieren.
  • Zudem können Sie die maximale Breite des Player definieren, indem Sie eine genaue Pixelangabe (z. B. 480px) oder eine prozentuale Angabe (z. B. 75%) verwenden.
  • Die Eingabe eines Wertes wird nur für Videos mit geringerer Qualität Bildqualität empfohlen, damit das Video nicht im Inhaltsbereich hochskaliert wird. Geben Sie z. B. ein: 720px oder 50%.


Hinzufügen von Audio- oder Video-Dateien in eine Playlist

  • Klicken Sie in das "Video Player Box Element "-Makro und wählen Sie "Neues Video/Audio" aus. 
  • Klicken Sie auf das hinzugefügte "Video Player Element" und anschließend auf „Bearbeiten“.
  • Geben Sie hier bitte den vollständigen Link zu Ihrer Audio-/Videodatei bzw. Videodatei einzu Ihrem -Stream ein. Über die "Vorschau" können Sie das Video vorab ansehen.
  • Sie können mehrere Video-/Audiodateien bzw. -Streams (d. h. "Video Player Elemente") in Ihre Wiedergabeliste einbinden.
  • Beispiel-URL des Videos: https://medien.cedis.fu-berlin.de/html5/check/mein-video_720p.mp4

Tipp
  • Falls Ihre Video- oder Audio-Datei in mehreren Qualitäten auf dem Medienserver vorliegt, werden diese automatisch eingebunden und im Player auswählbar sein.
  • Speichern Sie die Dateien auf dem Medienserver entsprechend der u. g. Dateinamenskonventionen.
  • Verlinken Sie genau eine dieser Dateien Mediendateien im Feld "URL zu Ihrem Video/Audio", diese wird dann als Standard voreingestellt.
  • Der Medienplayer unterstützt "echtes" Streaming über das HLS-Verfahren (HTTP Live Streaming). Weitere Infos hierzu sind verfügbar unter: https://www.cedis.fu-berlin.de/services/medien/av-medien/medienplayer/index.html


Erweiterte Funktionen

Untertitel / Kapitel einfügen

  • Klicken Sie in das "Video Player Element" und wählen Sie "Neue Untertitel / Kapitel" aus.
  • Klicken Sie auf das eingefügte "Untertitel / Kapitel Element" und wählen Sie "Bearbeiten".
  • Wählen Sie die verfügbare Sprache Ihrer Untertitel / Kapitel aus. Wenn Sie die korrekte Benennung der Dateinamen Untertitel-/Kapiteldatei auf dem Medienserver beachten, werden die Dateien für Startbild und Untertitel automatisch eingebunden Untertitel-/Kapiteldateien (WebVTT-Format) automatisch in das Feld eingefügt (s. u.).
  • Entspricht die Untertitel-/Kapiteldatei (WebVTT-Format) nicht der Konvention zur automatischen Einbindung, können Sie auch den vollständigen Pfad im folgenden Feld eingeben: "URL der Kapitel- oder Sprach-Untertiteldatei (VTT-Format)".
  • Sie können optional auswählen, dass eine Untertitel-Sprache beim Abspielen des Videos automatisch im Player angezeigt wird. Dazu aktivieren Sie die Checkbox "Untertitel-AutoStart setzen".
  • Achtung: Wenn Sie einen Stream (m3u8) einbinden, sollte hier keine Untertitel-/Kapiteldatei eingefügt werden.
  • Speichern Sie die Einstellung und aktualisieren Sie Ihre Wikiseite. 
  • Bei Fragen zur Erstellung von Untertiteln / Kapiteln wenden Sie sich bitte an das Medienteam des Center für Digitale Systeme (CeDiS) an der Universitätsbibliothek
  • Beispiel-URL der Untertitel: https://medien.cedis.fu-berlin.de/html5/check/mein-video_de.vtt
  • Beispiel-URL der Kapitel des Untertitels: https://medien.cedis.fu-berlin.de/html5/check/mein-video_DEchapters.vtt


Tipp
  • Wir empfehlen, dass Sie Ihre Mediendatei entsprechend der Dateinamenskonvention auf dem Server speichern, z. B. mit dem Dateinamen "../mein-video_720p.mp4". 
  • In diesem Fall wird automatisch getestet überprüft, ob die Mediendatei abrufbar ist. Außerdem wird geprüft, ob weitere Dateien auf dem Server existieren (z. B. andere Qualitäten, ein Startbild, Untertitel oder UntertitelKapitel).

...

Startbild einfügen

  • Hier Sie können Sie ein StartbildStart-/Titelbild für Ihr Video festlegen, das angezeigt wird, bevor das Video/Audio startet. 
  • Sollte auf dem CeDiS-Medienserver ein Startbild mit der korrekten Dateinamenskonvention (Dateinamen: "../mein-video_poster.jpg) hinterlegt sein, wird dieses dem Video automatisch zugefügt, wenn Sie einmal in das Startbild-Feld klicken. 
  • Sie können jedoch auch einen vollständigen Pfad zu einer anderen Bilddatei angeben. 
  • Bleibt das Eingabefeld leer, so wird automatisch ein Default-Bild verwendet. 
  • Achtung: Wenn Sie einen Stream (m3u8) einbinden, kann kein Startbild eingefügt werden.
  • Nach der Auswahl Ihres Startbilds speichern Sie die Einstellung.
  • Beispiel-URL des Startbilds: https://medien.cedis.fu-berlin.de/html5/check/mein-video_poster.jpg 


Tipp
  • Für das Startbild sollte ein Seitenverhältnis von 16:9 gewählt werden, damit keine schwarzen Balken angezeigt werden.

Bearbeiten von Medien-Dateien in der Playlist

  • Mittels Drag & Drop der "Video Player Elemente" innerhalb des "Video Player"-Makros können Sie die Reihenfolge Ihrer Videos/Audios/Streams in der Wiedergabeliste verändern.
  • Um einzelne Video-/Audiodateien oder

...

  • Streams zu bearbeiten oder

...

  • zu entfernen, klicken Sie das jeweilige "Video Player Element" an und wählen dann eine der verschiedenen Bearbeitungsmöglichkeiten aus.
  • Unter

...

  • "Bearbeiten" können Sie die eingebundene Medien-URL und die entsprechenden Metadaten verändern.
  • Mit "Neue Untertitel / Kapitel" können Sie eine weitere Untertitel-/Kapiteldatei einbinden.
  • Unter "Entfernen" löschen Sie das ausgewählte "Video

...

  • Player Element" aus der Playlist.


Warnung
  • Audio- und Videodateien müssen auf einem Server der Freien Universität liegen, dessen Domain auf .fu-berlin.de endet, z. B. auf dem CeDiS-Medienserver.
  • Falls Ihre Einrichtung noch keinen Zugang zum CeDiS-Medienserver hat, kontaktieren Sie bitte unseren Support.
  • Verwenden Sie das Protokoll HTTPS, damit Ihre Dateien auch bei der Auslieferung Ihrer Website über SSL abgespielt werden können.
  • Falls Ihre Dateien auf dem CeDiS-Medienserver hochgeladen sind, erfolgt die Einbindung automatisch immer mit https://<URL>.


Tipp
  • Falls Sie Videos oder Audios von externen Diensten wie z. B. Youtube oder Vimeo einbinden möchten, nutzen Sie bitte das Makro „Externe Inhalte datenschutzkonform“.
  • Sie können die HTML5-Kompatibilität prüfen, indem Sie die Video-Datei direkt im Browser aufrufen, indem Sie die URL der Mediendatei in die Adresszeile eingeben und das Video mittels des nativen Browser-Players abspielen.
  • Erfahrungsgemäß treten einzelne Fehler nicht bei allen Browsern auf. Der Browser Die aktuelle Version des Browsers Mozilla Firefox wird für das Testen empfohlen.

Unterstützte Videoformate 


Warnung
  • Videos werden (im standardmäßigen Progressive-Download-Verfahren) in den Formaten MP4, M4V, sowie WebM unterstützt

...

  • , Flash-Formate (FLV, FLA)

...

  • dagegen nicht. 

...

Warnung
  • 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önnenbestmöglich dargestellt werden.
  • Als Streaming-Verfahren wird HLS (im m3u8-Format) unterstützt. Bei Fragen dazu steht das Medienteam des Center für Digitale Systeme (CeDiS) bereit.



Info
  • Beispiel-URL für ein HD-Video mit einer 720p-Auflösung:

...


Unterstützte Audioformate


Info
  • Beispiel-URL für eine Audio-Datei mit einer 320 kbit/s-Datenrate:

...

...


Tipp
iconfalse

Bei Fragen oder Anregungen zu den Themen Medienplayer, Medienserver und Mediendateien/-streams steht das Medienteam des Center für Digitale Systeme (CeDiS) an der Universitätsbibliothek für Sie bereit.