Basic plugins

Step 1: Import the plugin:

...
import {
    basicPlugins, // All plugins
    FullscreenButtonPlugin      // Independent plugin
} from '@asicupv/paella-basic-plugins';

let paella = new Paella('playerContainer', {
    plugins: [
        ...basicPlugins,    // All plugins
        { // One plugin
            plugin: FullscreenButtonPlugin,
            config: {
                enabled: true
            }
        }
    ]
});
...

Step 2: Configure the plugins you want to use in the paella player configuration.

{
    "plugins": {
        ...
        "es.upv.paella.fullscreenButton": {
            "enabled": true,
            "side": "right",
            "order": 0
        }
        ... other plugin settings
    }
}

Included plugins

es.upv.paella.fullscreenButton

Enables and disables full screen mode.

{
    "plugins": {
        "es.upv.paella.fullscreenButton": {
            "enabled": true,
            "side": "right",
            "order": 2
        }...
    }
}

Note: the fullscreen mode is not supported on iOS devices. If you have a web page with a list of several players, you can emulate the fullscreen mode using CSS as described in the following document: Fullscreen Fallback for iOS Devices.

Exported as FullscreenButtonPlugin.

Icon customization data:

• Plugin identifier: es.upv.paella.fullscreenButton
• Icon names:
  • fullscreenIcon: enter fullscreen mode icon.
  • windowedIcon: exit fullscreen mode icon.

Note: On iOS it is not possible to enable fullscreen on DOM tree elements, only on a video. As paella-core is mainly a multi-stream player, the fullscreen button is disabled on iPhone devices, porque solo se podría hacer fullscreen en uno de los vídeos. In addition to this, fullscreen on a single video causes important features of the player to be lost, such as subtitles, so the button is also not active on single stream videos.

es.upv.paella.volumeButtonPlugin

Set the audio volume. This plugin only works on desktop platforms, as the volume change APIs do not work on mobile devices.

{
    "plugins": {
        "es.upv.paella.volumeButtonPlugin": {
            "enabled": true,
            "side": "left",
            "order": 3,
            "volumeAlwaysVisible": false,
            "showVolumeOnFocus": true
        },
        ...
    }
}

• volumeAlwaysVisible (paella-basic-plugins >= 1.31): By default, the volume slider is hidden until the user moves the mouse over the volume button. With this parameter you can make the volume slider always visible.
• showVolumeOnFocus (paella-basic-plugins >= 1.31): If set to false, the volume slider will not be displayed when the button receives focus. By default this value is true.

Exported as VolumeButtonPlugin.

Icon customization data:

• Plugin identifier: es.upv.paella.volumeButtonPlugin
• Icon names:
  • volumeHighIcon: maximum volume level.
  • volumeMidIcon: medium volume level.
  • volumeLowIcon: low volume level.
  • volumeMuteIcon: muted volume.

Note: the JavaScript volume API is read only on iPad and iPhone devices. According to Apple, this is because on both iPad and iPhone, only a simultaneous audio stream is allowed to play. For example, if background music is being played, it will be detained if we play a video from another application. For this reason, the volume plugin is not available on iPad and iPhone platforms. This restriction can be extended to other platforms that do not have a valid audio volume API either.

es.upv.paella.forwardButtonPlugin

These are two independent button-type plugins, which advance or rewind the video by 30 seconds (by default) with a single click. The seeked time can be configured using the time attribute.

{
    "plugins": {
        "es.upv.paella.forwardButtonPlugin": {
            "enabled": true,
            "side": "left",
            "order": 2,
            "time": 30
        },

        "es.upv.paella.backwardButtonPlugin": {
            "enabled": true,
            "side": "left",
            "order": 1,
            "time": 30
        },
        ...
    }
}

Exported as ForwardButtonPlugin and BackwardButtonPlugin.

Icon customization data:

• Plugin identifier: es.upv.paella.forwardButtonPlugin

• Icon names:

  • forwardIcon

• Plugin identifier: es.upv.paella.backwardButtonPlugin

• Icon names:

  • backwardIcon

IMPORTANT NOTE ABOUT ICON CUSTOMIZATION: The icons for these plugins contain dynamic text within the SVG file. This allows you to modify the icon depending on the amount of time you have set for the jump. To maintain this feature, it’s important that if you customize the SVG using the icon customization API, the time is specified by a text tag with the time-text class.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <style>
        .time-text {
            font: 25px sans-serif;
        }
    </style>
    <g id="Mesa-de-trabajo1" serif:id="Mesa de trabajo1" transform="matrix(0.125,0,0,0.125,0,0)">
        <rect x="0" y="0" width="512" height="512" style="fill:none;"/>
        <g id="backwardIcon">
            <g transform="matrix(0.301682,-0.953409,0.953409,0.301682,-33.639,434.074)">
                ...
            </g>
            <g transform="matrix(8,0,0,8,-12.5937,20.6629)">

                <!-- Using this text with the class time-text, the plugin will be able to change the time label in the icon -->
                <text class="time-text" x="0" y="54">s</text>
            </g>
        </g>
    </g>
</svg>

es.upv.paella.layoutSelector

Allows you to change the active video layout.

{
    "plugins": {
        "es.upv.paella.layoutSelector": {
            "enabled": true,
            "side": "right",
            "showIcons": true
        },
        ...
    }
}

The “showIcons” (paella-basic-plugins >= 1.26.1) option allows you to show or hide the icons defined for each layout. If the icons are not shown, the title of the layout will be displayed. If this option is not specified, the default value is true.

Exported as LayoutSelectorButtonPlugin.

Icon customization data:

• Plugin identifier: es.upv.paella.layoutSelector
• Icon names:
  • layoutIcon

es.upv.paella.playbackRateButton

Modifies the video playback speed. In the plugin configuration it is possible to set the possible values. If this property is not included in the configuration, the plugin will use the default values:

{
    "es.upv.paella.playbackRateButton": {
        "enabled": true,
        "side": "right",
        "showIcon": true,
        "parentContainer": "videoContainer",
        "rates": [0.75, 1, 1.5, 2],
        "menuTitle": "Playback Rate"
    },
    ...
},

Exported as PlaybackRateButtonPlugin.

Icon customization data:

• Plugin identifier: es.upv.paella.playbackRateButton
• Icon names:
  • screenIcon: screen icon, with filled background, to give contrast to the text of the selected playback rate.
  • playbackRateIcon: icon used when the plugin is added to a button group

es.upv.paella.captionsSelectorPlugin

Allows you to select the subtitle track of the video. The plugin is able to detect in real time if the number of audio tracks has been modified, and updates to reflect these changes:

{
    "es.upv.paella.captionsSelectorPlugin": {
        "enabled": true,
        "side": "right",
        "parentContainer": "playbackBar",
        "menuTitle": "Available Captions"
    },
    ...
}

Exported as CaptionsSelectorButtonPlugin.

Icon customization data:

• Plugin identifier: es.upv.paella.captionsSelectorPlugin
• Icon names:
  • captionsIcon

es.upv.paella.qualitySelector

Allows to select the video quality level, in case the video supports several quality levels. The quality information displayed by the plugin is obtained from the playerInstance.captionsCanvas API.

{
   "es.upv.paella.qualitySelector": {
        "enabled": true,
        "side": "right",
        "parentContainer": "videoContainer",
        "menuTitle": "Video Quality",
        "showIcon": false
    },
    ...
}

Exported as QualitySelectorButtonPlugin.

Icon customization data:

• Plugin identifier: es.upv.paella.qualitySelector
• Icon names:
  • screenIcon: screen icon, with filled background, to give contrast to the text of the selected video quality.
  • settingsIcon: icon used when the plugin is added to a button group.

es.upv.paella.audioSelector

Allows the user to change the active audio, in case the main audio stream supports multiple audio tracks.

{
    "es.upv.paella.audioSelector": {
        "enabled": true,
        "side": "right"
    },
    ...
}

Exported as AudioSelectorButtonPlugin.

Icon customization data:

• Plugin identifier: es.upv.paella.audioSelector
• Icon names:
  • screenIcon: screen icon, with filled background, to give contrast to the text of the selected audio track.

es.upv.paella.downloadsPlugin

Displays a list of downloadable videos. The list will show all MP4 video sources present in the video manifest.

{
    "es.upv.paella.downloadsPlugin": {
        "enabled": true,
        "side": "right",
        "description": "Downloads"
    },
    ...
}

Exported as DownloadsButtonPlugin.

Icon customization data:

• Plugin identifier: es.upv.paella.downloadsPlugin
• Icon names:
  • downloadIcon

es.upv.paella.keyboardShortcutsHelp

Displays a list of available keyboard shortcuts, which is obtained from the active keyboard shortcut plugins.

{
    "es.upv.paella.keyboardShortcutsHelp": {
        "enabled": true,
        "side": "right",
        "description": "Keyboard Shortcuts",
        "menuTitle": "Keyboard Shortcuts"
    },
    ...
}

Exported as KeyboardHelpButtonPlugin.

Icon customization data:

• Plugin identifier: es.upv.paella.keyboardShortcutsHelp
• Icon names:
  • keyboardIcon

es.upv.paella.findCaptionsPlugin

Allows you to search for text in the subtitles of the video.

{
    "es.upv.paella.findCaptionsPlugin": {
        "enabled": true,
        "side": "right",
        "description": "Search in captions"
    },
    ...
}

Exported as FindCaptionsButtonPlugin.

Icon customization data:

• Plugin identifier: es.upv.paella.findCaptionsPlugin
• Icon names:
  • findCaptionsIcon

es.upv.paella.customTimeProgressIndicator

Allows to add a video elapsed time indicator as a non-interactive button type plugin.

{
    "es.upv.paella.customTimeProgressIndicator": {
        "enabled": true,
        "textSize": "large",    // "small", "medium" or "large"
        "showTotal": false
    }
}

Exported as CustomTimeProgressIndicatorPlugin

es.upv.paella.liveStreamingProgressIndicator

Displays a live streaming text above the timeline bar, when the video is a live event.

{
    "es.upv.paella.liveStreamingProgressIndicator": {
        "enabled": true,
        "layer": "foreground",
        "side": "left",
        "margin": 10,
        "textColor": "#AA0000",
        "circleColor": "#FF0000"
    }
}

Exported as LiveStreamingProgressIndicatorPlugin