JGU – Videos

Add video and audio to your web pages with the [jgupanopto] and [jguvideo] shortcodes.

Streaming Media is a technology that makes multimedia data (e.g. audio and video data) available on websites for direct retrieval. This avoids having to download usually large multimedia files.

In addition to these special JGU shortcodes, you can use the standard WordPress [video] shortcode to include videos uploaded to your projects Media-Manager. You can find more information regarding this shortcode in the WordPress video shortcode documentation.

Inhalt

  1. Panopto
    1. Integrate Panopto videos via shortcode
    2. Link to Panopto videos
    3. Integrate Panopto Videos via Podcast-URL
    4. Integrate Panopto audio files via shortcode
    5. More information about Panopto
  2. Integrate YouTube videos
  3. Integrate a video from Seafile
  4. Link to a video via text link

 

Attention: Best practice is to include the Panopto Videos. This service is brought to you by the Rineland-Palatinate Government and the JGU University.  There are no legal complications due to external cloud services. All data remain on our local platform

Panopto

The Centre for Data Processing (ZDV) operates its own video platform, which is available free of charge to all universities in Rhineland-Palatinate. Panopto is a web-based application for video publishing, providing, and comes with elementary video cutting functionality. With the Panopto recorder, you can use your computer to record webcasts, or for live streams. Content recorded in this way can be integrated into WordPress in various ways.

Integrate Panopto videos via shortcode

Finding the video's Panopto-ID

To include a Panopto video via shortcode, you need the Panopto ID of the video. You can find it like this:

Open the desired video via Panopto and copy the corresponding Panopto video URL. It looks like this, for example:

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

The Panopto ID in this example is:f1029ced-4f56-4638-9dd0-047f27a92fb9

Use the shortcode [jgupanopto] to include Panopto videos with a player into your WordPress website.

Example:

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

Copy the following example into your website and replace replace_with_panopto_id with the Panopto ID of your video:

[jgupanopto panopto_id="replace_with_panopto_id"]

Customize shortcode with parameters

You can use the following parameters to customize the behaviour of the shortcode:

  1. Parameter: panopto_host
    Function: URL of the Panopto server Panopto-Servers (usually not needed)
    Standard: video.uni-mainz.de
    Example: [jgupanopto panopto_host="video.hs-mainz.de"] - hiermit könnten Sie Videos des Panopto-Servers der Hochschule Mainz einbinden
  2. Parameter: max-width
    Function: set maximal width of the video (value in pixels)
    Example: [jgupanopto max-width="300"]
  3. Parameter: ratio
    Function: Verhältnis Breite zu Höhe für die Darstellung des Video-Fensters
    Possible values: 16x9 (Standard), 4x3
    Example: [jgupanopto ratio="4x3"]

When embedding access-protected videos, problems and error messages can occur when the video is integrated via shortcode.

Link to Panopto videos

In some cases a Link to a Panopto Video is  the better solution than using the shortcode! If  in your Video you ...

  1. Make use of the chapter markers,
  2. Show comments,
  3. Use the jump labels,
  4. Restrict the access to the Video,

you should offer the video as a link to the Panopto interface.

Copy the Panopto video URL and paste it as a link to a text or image.

Integrate Panopto Videos via Podcast-URL

Panopto provides different URLs for your videos, which you can get from Panopto's user interface if you have the rights for the respective video. You can then insert this Panopto video podcast URL into the visual editor of WordPress to display the WordPress video player without having to use the shortcode (however, the additional parameters of the shortcode are not available to you then!)

You can display this URL in Panopto as a logged-in user under "Settings" -> "Outputs" -> "Show Podcast".

Such a URL looks like this:

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

Remove the query string from the URL ?mediaTargetType=videoPodcast and insert the URL into the WordPress editor. After saving the page, the Video will be shown instead of the URL both in the editor and on the frontend for the user.

Integrate Panopto audio files via shortcode

You can also use Panopto Sie stream audio files. To do so, use the  [jgupanopto] with the parameter audio="on".

Example:

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

Customize shortcode with parameters

You can use the following parameters to customize the behavior of the shortcode:

  1. Parameter: audio-max-width
    Function: shows audio player with 100% width
    Standard: small player (300px width)
    Example: [jgupanopto audio-max-width="on"]
  2. Parameter: audio-autoplay
    Function: start audio when page is loaded
    Standard: auto-play off
    Example: [jgupanopto max-autoplay="on"]
    Note: from an accessibility point of view, avoid using this parameter and let visitors decide to start the audio output themselves.

More information about Panopto

You can find more information about Panoto under the following links:

Integrate YouTube videos

YouTube videos are inserted simply via the URL of the YouTube video as a value for the url parameter:

 

Customize shortcode using parameters

Der Shortcode kann über die folgenden Parameter angepasst werden:

  1. Parameter w and h:
    Function: modify width and height of the video in pixels
    Example: [jguvideo w="300" h="200" ]
  2. Parameter image
    Function: preview image (optional)
    Example: [jguvideo url="http://www.youtube.com/watch?v=id-des-youtube-videos" w="123" h="123" image="http://www.pfad-zur-bild/datei.jpg"]

Make sure that video and image have the same aspect ratio. The image parameter requires the full URL to the image.

For example, add the image via "Add files - upload". You will then see the image checked in the media preview. On the right side of "File Attachment / Display Setting" you will find the address of the image, which you copy to the clipboard with CTRL-C. Then uncheck the image and close the "Add files" window. Now add the image parameter image="Address from cache strg-v", e.g.

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

[jguvideo url="http://www.youtube.com/watch?v=9KkHur8NMJM" image="//www.blogs.uni-mainz.de/wp-content/uploads/2012/03/startbild.gif"]

Integrate a video from Seafile

Upload the video to Seafile. Share it. You will get a link that you can use to integrate the video into the WordPress site.

 

Link to a video via text link

You have uploaded a small and short video directly to WordPress and you don't want a preview image, but really only a text link. Only after you click on the text link, a window opens with the video and the video starts.

Example for Video with text link: → Example of video linked to text

  1. Click on the video in the media manager.
  2. Copy the video link to the clipboard
  3. Go to the page where you want to include the link.
  4. Add the video link to the text.