JGU Videos: Diverse Videoformate abspielen

Mit den JGU Video Shortcodes [jgupanopto] und [jguvideo] fügen Sie Videos und Audios von Streaming-Servern im Texteditor ein.

Streaming Media ist eine Technologie, die Multimedia-Daten (z.B. Audio- und Video-Daten) auf Webseiten zum Direktabruf zur Verfügung stellt. Dadurch wird der Zeitaufwand vermieden, der ansonsten für das Herunterladen der in der Regel recht großen Multimedia-Dateien entstehen kann.

Neben diesen speziellen JGU Shortcodes können Sie den WordPress Standard-Shortcode 

[video]

verwenden, um Videos, die über den Medien-Manager in Ihrem Projekt hochgeladen werden, in die Seite einzubinden. Weitere Infos dazu finden Sie in der WordPress Dokumentation zum Video Shortcode.

Achtung : ❗ Wechseln Sie in den Modus Text (Kartenreiter oben rechts), bevor Sie etwas an den Shortcodes ändern!


Hinweis: Auch wenn Sie Videos von verschiedenen Plattformen einbauen können, fügen Sie Videos am besten über Panopto ein. Da dieser  Dienst von der Universität und dem Land Rheinland-Pfalz bereitgestellt wird, sind Sie damit datenschutzrechtlich auf der sicheren Seite.

Panopto

Das Zentrum für Datenverarbeitung betreibt eine eigene Videoplattform, die allen rheinland-pfälzischen Hochschulen kostenfrei zur Verfügung steht. Panopto ist eine webbasierte Anwendung zum Veröffentlichen, Bereitstellen und elementaren Schneiden von Videos. Mithilfe des zugehörigen Panopto-Recorders kann der eigene Rechner zum Aufnehmen von Webcasts oder für Live-Streams genutzt werden. Die so aufgezeichneten Inhalte können in WordPress auf unterschiedliche Art eingebunden werden.

Panopto-ID einer Video/Audio Datei finden

Um ein Panopto-Video/Audio per Shortcode einzubinden, benötigen Sie die Panopto-ID der Datei. Diese finden Sie so:

Öffnen Sie das gewünschte Video/Audio über Panopto und kopieren Sie die zugehörige Panopto-URL. So sieht das zum Beispiel aus:

https://video.uni-mainz.de/Panopto/Pages/Viewer.aspx?id=f1029ced-4f56-4638-9dd0-047f27a92fb9

Die Panopto-ID in diesem Beispiel lautet:f1029ced-4f56-4638-9dd0-047f27a92fb9

Panopto Videos per Shortcode einbauen

Um Videos von Panopto direkt mit einem Player in die WordPress-Seite einzubinden, verwenden Sie den Shortcode [jgupanopto].

Beispiel:

[jgupanopto panopto_id="f1029ced-4f56-4638-9dd0-047f27a92fb9"]

Kopieren Sie nun den folgenden Shortcode in Ihre Seite:

[jgupanopto panopto_id="dieshierdurchdieidersetzen"]

Ersetzen Sie dieshierdurchdieidersetzen durch die Panopto-ID, speichern Sie und probieren Sie es aus.

Live-Demo: → So sieht ein eingebundenes Video aus

Shortcode jgupanopto mit Parametern anpassen

Der Shortcode kann über die folgenden Parameter angepasst werden:

  1. Parameter: panopto_host
    Funktion: URL des Panopto-Servers (benötigen Sie standardmäßig nicht)
    Standard: video.uni-mainz.de
    Beispiel: [jgupanopto panopto_host="video.hs-mainz.de"] - hiermit könnten Sie Videos des Panopto-Servers der Hochschule Mainz einbinden
  2. Parameter: max-width
    Funktion: maximale Breite des Video-Fensters festlegen (Wert in Pixeln)
    Beispiel: [jgupanopto max-width="300"]
  3. Parameter: ratio
    Funktion: Verhältnis Breite zu Höhe für die Darstellung des Video-Fensters
    Mögliche Werte: 16x9 (Standard), 4x3
    Beispiel: [jgupanopto ratio="4x3"]

Auf Panopto Videos in Panopto verlinken

Möchten Sie ein Video in Panopto nutzen, das bspw. umfangreiche Kapitelmarkierungen, Kommentare oder Sprungmarken für den Benutzer zur Verfügung stellt oder das nicht öffentlich zugänglich ist und für dessen Aufruf zunächst ein Login notwendig ist, dann sollten Sie das Video als Link auf die Panopto-Oberfläche anbieten.

Kopieren Sie die Panopto-Video URL und fügen Sie diese als Link auf einen Text oder ein Bild ein.

Vor allem beim Einbinden von zugriffsgeschützten Videos kann es bei Einbindung des Videos per Shortcode zu Probleme und Fehlermeldungen kommen.

Panopto Videos per Podcast-URL einbauen

Panopto bietet Ihnen für Ihre Videos unterschiedliche URLs an, die Sie über die Verwaltungsoberfläche von Panopto mit den entsprechenden Rechten für das jeweilige Video auslesen können. So können Sie durch Einfügen einer Video-Podcast-URL aus Panopto in den visuellen Editor von WordPress automatisch das zugehörige Video im WordPress Videoplayer anzeigen lassen und müssen nicht den Shortcode verwenden (allerdings stehen Ihnen dann nicht die zusätzlichen Parameter des Shortcodes zur Verfügung!).

Diese URL können Sie sich in Panopto als eingeloggter Benutzer unter Einstellungen → AusgabenPodcast anzeigen anzeigen lassen. Eine solche URL sieht z.B. so aus:

https://video.uni-mainz.de/Panopto/Podcast/StreamInBrowser/f1029ced-4f56-4638-9dd0-047f27a92fb9.mp4?mediaTargetType=videoPodcast

Entfernen Sie nun noch den hinteren Teil der URL ?mediaTargetType=videoPodcast und fügen Sie die URL im WordPress-Editor ein. Direkt nach dem Speichern der Seite wird Ihnen statt der URL das Video im WordPress-Videoplayer angezeigt und auch auf der Seite für die Benutzer dargestellt.

Panopto Audio Dateien per Shortcode einbauen

Sie können Panopto auch zum Streamen von Audio-Dateien einsetzen. Dazu verwenden Sie im Panopto-Shortcode [jgupanopto] den Parameter audio="on" erweitert.

Beispiel:

[jgupanopto audio="on" panopto_id="f1029ced-4f56-4638-9dd0-047f27a92fb9"]

Der Shortcode kann über die folgenden Parameter angepasst werden:

  1. Parameter: audio-max-width
    Funktion: zeigt den Audioplayer mit 100% Breite an
    Standard: kleine Darstellung (300px Breite)
    Beispiel: [jgupanopto audio-max-width="on"]
  2. Parameter: audio-autoplay
    Funktion: startet die Audioausgabe, sobald die Seite geladen wurde
    Standard: kein Autoplay
    Beispiel: [jgupanopto max-autoplay="on"]
    Hinweis: Vor allem aus Sicht der Barrierefreiheit sollten Sie auf den Einsatz dieses Parameters verzichten und dem Benutzer der Webseite das Starten der Audioausgabe selbst überlassen.

So sieht das aus: → Panopto-Audio einbinden

Weitere Informationen zu Panopto

Informationen zu Panopto finden Sie u.a. auch hier:

auf der Webseite zu E-Learning an der JGU (speziell auch zur Einbindung von Videos in WordPress)

auf der Webseite für Digitale Lehre an der JGU

YouTube-Videos einfügen

YouTube Videos fügen Sie mit dem Shortcode [jguvideo] ein. Fügen Sie dazu die URL des YouTube Videos als Wert für den Parameter url ein:

Beispiel:
[jguvideo url="http://www.youtube.com/watch?v=9KkHur8NMJM"]

Live Demo: Youtube Video einbinden

Shortcode jguvideo mit Parametern anpassen

Der jguvideo kann über die folgenden Parameter angepasst werden:

  1. Parameter w und h:
    Funktion: Breite und Höhe des Videos in Pixel anpassen
    Beispiel: [jguvideo w="300" h="200" ]
  2. Parameter image
    Funktion: Vorschaubild (optional)
    Beispiel: [jguvideo url="http://www.youtube.com/watch?v=id-des-youtube-videos" w="123" h="123" image="http://www.pfad-zur-bild/datei.jpg"]

Achten Sie darauf, dass Film und Bild die gleichen Größendimensionen besitzen. Image muss die vollständige URL des Bildes enthalten.

Fügen Sie z.B. das Bild über "Dateien hinzufügen - hochladen" hinzu. Sie sehen dann das Bild in der Medienvorschau angehakt. Rechts bei "Dateianhang / Anzeigeneinstellung" finden Sie die  Adresse des Bildes, die Sie mit STRG-C in den Zwischenspeicher kopieren. Haken Sie dann das Bild aus und schließen Sie das "Dateien hinzufügen"-Fenster. Erweitern Sie nun den Shortcode um image="Adresse aus dem Zwischenspeicher strg-v", also z.B:

image="//www.blogs.uni-mainz.de/wp-content/uploads/2012/03/startbild.gif"

Seafile-Video einbauen

Laden Sie das Video in Seafile hoch. Geben Sie es frei. Der Link, den Sie dabei bekommen, dient zum Einbau in die WordPress Seite.

Per Textlink auf ein Video verlinken

Sie haben das Video, weil es kurz und klein ist, direkt in WordPress eingebunden und möchten kein Vorschaubild, sondern wirklich nur einen Textlink. Erst wenn man auf den Textlink geklickt hat, dann öffnet sich ein Fenster mit dem Video und das Video startet.

So sieht es aus: → Beispiel für Video

  1. In Medien das Video anklicken
  2. Den Link vom Video in den Zwischenspeicher nehmen
  3. Auf die Seite wechseln
  4. Den Text mit dem Link vom Video verlinken

Externe Streaming-Server

Andere Streamingserver werden von unserem Shortcode nicht unterstützt und liefern kein sinnvolles Ergebnis. Stand Juli 2020 kommt es dabei zu einer Flash-Fehlermeldung.