Paella Player 7

Paella 7 is Opencast's default player.

The Paella (pronounced 'paeja') Player is an Open Source JavaScript video player capable of playing an unlimited number of audio & video streams synchronously, Live Streaming, Zoom, Captions, contributed user plugins and a lot more. It is easy to install and customize for your own needs.

Paella 7 will be a complete rewrite of Paella, aiming several issues

Have a look at the paella 7 repository or documentation page.

Configuration

The configurations for the player are done for each tenant. So the configuration keys are located in .../etc/ui-config/<tenant>/paella7/config.json

The default tenant for opencast is mh_default_org

Customize the player

Paella player can be customized using skin packages.

Skin packages contain at least one skin configuration file, and additionally other files that are specified in the skin definition. The skin definition file is a json file with the following structure:

{
    "styleSheets": [
        "style.css"
    ],
    "configOverrides": {
        "progressIndicator": {
            "inlineMode": true
        },
        "videoContainer": {
            "overPlaybackBar": true
        }
    },
    "icons": [
        {
            "plugin": "es.upv.paella.playPauseButton",
            "identifier": "play",
            "icon": "play-icon.svg"
        }
    ]
}

The skin definition file is divided into three sections:

For more information, see the paella 7 skin documentation.

You can create a new folder for you theme in .../etc/ui-config/<tenant>/paella7/ with a file called theme.json and configure the theme you want to use in config.json file:

{
    ...
    "opencast": {
        "theme": "custom_theme"
        ...
    }
    ...
}

And create your custom theme: .../etc/ui-config/<tenant>/paella7/custom_theme/theme.json. As an example there is a basic example here: .../etc/ui-config/<tenant>/paella7/custom_theme_example

If no custom theme is found or there is an error loading the resources, the default opencast theme will be used.

Select the Opencast Player

To activate the player set for each tenant the property prop.player in the file .../etc/org.opencastproject.organization-<tenant>.cfg.

prop.player=/paella7/ui/watch.html?id=#{id}

Paella uses cookies to store some user parameters (layout configuration, volume, etc...). And, if enabled, the paella user tracking plugin can use cookie to track the user.

To comply with GDPR, ePrivacy Directive, or any other privacy laws, the opencast player uses the Terms Feed Privacy Consent banner and the paella config.json file is configured to use it.

To Learn more about paella cookie consent you can read paella cookie consent documentation.

You can enable/disable the cookie consent banner in config.json file:

{
    ...
    "opencast": {
        "cookieConsent": {
            "enable": true
        },
        ...
    }
    ...
}

Hide/Show the timeline bar on Live events

Paella can hide the timeline bar in live events using the opencast.hideTimeLineOnLive property in the configuration file.

If your live stream offers a time buffer to go back in time, you can configure paella so that the time buffer bar is displayed and visitors will be able to go back in time.

Example:

{
    ...
    "opencast": {
        "hideTimeLineOnLive": false
        ...
    }
    ...
}

Configure video canvas

Paella Player 7 supports multiple types of video canvas to render videos. The default is video, but there is for example also video360 for 360° videos.

In Opencast it is possible to configure which video canvas will be used for which track, depending on its tags and/or flavor. Only one tag or the flavor has to match for the canvas to be used. If the track meets the conditions of multiple canvases, all of them are set and the order field of the respective plugins controls in which order the player will try to use them.

In any case, you should not remove the video option so it can be used as a fallback by the player in case the other canvases cannot be rendered for any reason.

Example:

{
    ...
    "opencast": {
      "videoCanvas": {
        "video360": {
          "flavor": "*/delivery+360",
          "tag": "video360"
        },
        "video": {
          "flavor": "*/delivery"
        }
      }
        ...
    }
    ...
}