Player

A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers.

The Player component uses the Plyr library.

Usage

To apply this component, add the gls-player class to a <video> element.

<video class="gls-player"></video>

Kaltura Video Embed

This tutorial explains how to embed Kaltura videos in our player. Owners can generate a direct link to MP4 video files for their uploaded media. This link or URL allows you to use your videos within our custom player.

1. The URL for the direct MP4 link has the following structure: "https://www.kaltura.com/p/797802/sp/0/playManifest/entryId/{entryId}/format/url/flavorParamId/{flavorParamId}/video.mp4". Paste this URL (without quotes) in to your favorite plain-text editor and get ready to modify it.

   NOTE: Please take notice that certain words appear twice, "entryID" and "flavorParamID". We will be replacing the ones wrapped in curly braces "{}" and leaving the ones not wrapped in curly braces.

2. In this step we will be modifying the {flavorParamId}. The flavorParamID designates the quality or flavor of the video. Decide which flavor you would like to use by copying the corresponding ID from the following table:

   ID	Bitrate	Dimensions	Description
   0	Unknown	[auto] x [auto]	This is the original media file that you uploaded to Kaltura.
   487051	664	640 x [auto]	Standard Definition
   487081	2628	[auto] x 720	720p
   487091	4128	[auto] x 1080	1080p

   After copying the ID that works for you, paste it into the URL you previously pasted into your plain text editor. You should replace the text {flavorParamId} with the number you copied. Your URL should now look something like this: "https://www.kaltura.com/p/797802/sp/0/playManifest/entryId/{entryId}/format/url/flavorParamId/487081/video.mp4"

3. Now we need to get the entry_id for the video to which you are linking. The entry_id is a unique identifier for every video in Kaltura. You can get your entry_id by going to MediaSpace and navigating to your "My Media". Once in "My Media" click on the title of the media to which you want to link. This takes you to the media page. The URL for a media page has this structure: "https://mediaspace.wisc.edu/media/[Title of Media]/[entry_id]". Here is an example: https://mediaspace.wisc.edu/media/Canvas+-+Faculty+Center+Grade+Prep+Tool+%28UW-Madison%29/0_rl4tg8ta. Copy the entry_id for your media.

4. Paste the entry_id into the URL you modified in step two. You should replace the text {entryId} with your entry_id. Your URL should now look something like this: "https://www.kaltura.com/p/797802/sp/0/playManifest/entryId/0_rl4tg8ta/format/url/flavorParamId/487081/video.mp4".

5. Paste your newly formed URL into your favorite browser. Your video should begin playing. If it doesn't re-check the steps in this tutorial and make sure you copied everything correctly.

<video class="gls-player" controls crossorigin playsinline poster="">
    <source src="" type="video/mp4">
</video>

YouTube Embed

To embed YouTube videos.

<div class="gls-player">
    <iframe src="" allowfullscreen allowtransparency allow="autoplay"></iframe>
</div>

Vimeo Embed

To embed Vimeo videos.

<div class="gls-player">
    <iframe src="" allowfullscreen allowtransparency allow="autoplay"></iframe>
</div>

Audio

Add an audio player to a page.

<audio class="gls-player" crossorigin playsinline>
    <source src="" type="audio/mp3">
    <source src="" type="audio/ogg">
</audio>

Kaltura Audio Embed

This tutorial explains how to embed Kaltura audio in our player. Owners can generate a direct link to MP3/OGG audio files for their uploaded media. This link or URL allows you to use your videos within our custom player.

1. The URL for the direct MP4 link has the following structure: "https://www.kaltura.com/p/797802/sp/0/playManifest/entryId/{entryId}/format/url/a.mp3". Paste this URL (without quotes) in to your favorite plain-text editor and get ready to modify it.

   NOTE: Please take notice that certain the word "entryID" appears twice. We will be replacing the one wrapped in curly braces "{}".

2. Now we need to get the entry_id for the video to which you are linking. The entry_id is a unique identifier for every video in Kaltura. You can get your entry_id by going to MediaSpace and navigating to your "My Media". Once in "My Media" click on the title of the media to which you want to link. This takes you to the media page. The URL for a media page has this structure: "https://mediaspace.wisc.edu/media/[Title of Media]/[entry_id]". Here is an example: https://mediaspace.wisc.edu/media/Canvas+-+Faculty+Center+Grade+Prep+Tool+%28UW-Madison%29/0_rl4tg8ta. Copy the entry_id for your media.

3. Paste the entry_id into the URL you modified in step two. You should replace the text {entryId} with your entry_id. Your URL should now look something like this: "https://www.kaltura.com/p/797802/sp/0/playManifest/entryId/0_2euvoird/format/url/a.mp3".

4. Paste your newly formed URL into your favorite browser. Your audio should begin playing. If it doesn't re-check the steps in this tutorial and make sure you copied everything correctly.

<audio class="gls-player" crossorigin playsinline>
    <source src="" type="audio/mp3">
    <source src="" type="audio/ogg">
</audio>

Component options

Options can be passed as an object to the constructor as above or as JSON in data-plyr-config attribute on each of your target elements:

<video src="{{ baseurl }}/path/to/video.mp4" id="player" controls data-plyr-config='{ "title": "This is an example video", "volume": 1, "debug": true }'></video>

Note the single quotes encapsulating the JSON and double quotes on the object keys. Only string values need double quotes.

JavaScript

Unlike other components, this does not use Gloss. Learn more about how to use Plyr.

Initialization

new Plyr('#player');