Variable Speed and Skip Controls

Overview

The Ooyala player provides a variety of controls that are not enabled by default. Some controls can be added in Backlot when configuring the player. Please see the Manage section to set up the Player in Backlot.

If you configure the player locally, either with page-level params and/or skin.json overrides, these local settings always have priority (over any settings in Backlot). Additionally, not all player controls can be set in Backlot. This document provides information on how to enable and configure various Ooyala Player UI controls.

Variable Speed Playback

Note: For the Playback Rate menu, VR 360 type videos are not supported. As a result, the playback rate menu should not be enabled for players used to play VR 360 videos directly, or in mixed Flat and VR 360 playlists.

Initial Speed Playback

You can set the playback speed you desire at the start of the video using player parameters and setting initialPlaybackSpeed to a number between 0.5 (half initial speed) and 2 (twice initial speed). You can also set the desired playback speed of the next video when using setEmbedCode and setting the player parameters.

{
        “initialPlaybackSpeed”:2
        }

Manually setting playback speed

If you want to set playback speed without using the Ooyala UI, use the following apis.

[playerName].setPlaybackSpeed(speed);

Variable Play Speed Menu

The Playback Speed menu can be enabled by declaring a “playbackSpeed” button inside the buttons.desktopContent property of the skin configuration. The button should be added in the order in which it is meant to appear within the control bar.

You must also specify all of the other buttons you want, since any buttons omitted from this list are considered disabled. Below is an example of the skin’s default configuration, with a “playbackSpeed” button configured to appear after the “share” button:

skin.json
{
        "buttons": {
        "desktopContent": [
        { "name": "playPause", "location": "controlBar", "whenDoesNotFit": "keep", "minWidth": 45 },
        { "name": "volume", "location": "controlBar", "whenDoesNotFit": "keep", "minWidth": 240 },
        { "name": "live", "location": "controlBar", "whenDoesNotFit": "keep", "minWidth": 45},
        { "name": "timeDuration", "location": "controlBar", "whenDoesNotFit": "drop", "minWidth": 145 },
        { "name": "flexibleSpace", "location": "controlBar", "whenDoesNotFit": "keep", "minWidth": 1 },
        { "name": "share", "location": "controlBar", "whenDoesNotFit": "moveToMoreOptions", "minWidth": 45 },
        { "name": "playbackSpeed", "location": "controlBar", "whenDoesNotFit": "moveToMoreOptions", "minWidth": 45 },
        { "name": "discovery", "location": "controlBar", "whenDoesNotFit": "moveToMoreOptions", "minWidth": 45 },
        { "name": "closedCaption", "location": "controlBar", "whenDoesNotFit": "moveToMoreOptions", "minWidth": 45 },
        { "name": "quality", "location": "controlBar", "whenDoesNotFit": "moveToMoreOptions", "minWidth": 45 },
        { "name": "logo", "location": "controlBar", "whenDoesNotFit": "keep", "minWidth": 125 },
        { "name": "stereoscopic", "location": "controlBar", "whenDoesNotFit": "keep", "minWidth": 45 },
        { "name": "audioAndCC", "location": "controlBar", "whenDoesNotFit": "moveToMoreOptions", "minWidth": 45 },
        { "name": "fullscreen", "location": "controlBar", "whenDoesNotFit": "keep", "minWidth": 45 },
        { "name": "moreOptions", "location": "controlBar", "whenDoesNotFit": "keep", "minWidth": 45 },
        { "name": "arrowsBlack", "location": "mainView", "whenDoesNotFit": "keep", "minWidth": 45 }
      ]
    }
  }      
skin.inline overrides
var playerParams = {
        "skin": {
        "inline": {
        "buttons": {
        "desktopContent": [
        { "name": "playPause", "location": "controlBar", "whenDoesNotFit": "keep", "minWidth": 45 },
        { "name": "volume", "location": "controlBar", "whenDoesNotFit": "keep", "minWidth": 240 },
        { "name": "live", "location": "controlBar", "whenDoesNotFit": "keep", "minWidth": 45},
        { "name": "timeDuration", "location": "controlBar", "whenDoesNotFit": "drop", "minWidth": 145 },
        { "name": "flexibleSpace", "location": "controlBar", "whenDoesNotFit": "keep", "minWidth": 1 },
        { "name": "share", "location": "controlBar", "whenDoesNotFit": "moveToMoreOptions", "minWidth": 45 },
        { "name": "playbackSpeed", "location": "controlBar", "whenDoesNotFit": "moveToMoreOptions", "minWidth": 45 },
        { "name": "discovery", "location": "controlBar", "whenDoesNotFit": "moveToMoreOptions", "minWidth": 45 },
        { "name": "closedCaption", "location": "controlBar", "whenDoesNotFit": "moveToMoreOptions", "minWidth": 45 },
        { "name": "quality", "location": "controlBar", "whenDoesNotFit": "moveToMoreOptions", "minWidth": 45 },
        { "name": "logo", "location": "controlBar", "whenDoesNotFit": "keep", "minWidth": 125 },
        { "name": "stereoscopic", "location": "controlBar", "whenDoesNotFit": "keep", "minWidth": 45 },
        { "name": "audioAndCC", "location": "controlBar", "whenDoesNotFit": "moveToMoreOptions", "minWidth": 45 },
        { "name": "fullscreen", "location": "controlBar", "whenDoesNotFit": "keep", "minWidth": 45 },
        { "name": "moreOptions", "location": "controlBar", "whenDoesNotFit": "keep", "minWidth": 45 },
        { "name": "arrowsBlack", "location": "mainView", "whenDoesNotFit": "keep", "minWidth": 45 }
       ]
      }
     }
    }
  };
Configuring Playback Speed options

The speeds that are displayed on the Playback Speed menu can be configured using the playbackSpeed.options property of the skin configuration. The values should be numbers from 0.5 to 2 and have at most two decimals. The player filters out any invalid values and automatically sorts the options in descending order. The following values are used by default: 0.5, 0.75, 1, 1.25, 1.5, 2. Sample overrides are shown below:

skin.json
{
        "playbackSpeed": {
        "options": [ 0.5, 1, 1.5, 2 ]
        }
}     
skin.inline overrides
var playerParams = {
        "skin": {
        "inline": {
        "playbackSpeed": {
        "options": [ 0.5, 1, 1.5, 2 ]
        }
       }
      }
    };

Optional Skip Forward/Rewind and Previous/Next Video Buttons

The display includes skip buttons, which can be customised to specify the amount of seconds to skip forward or back in the current video. Also displayed are buttons to skip back to the beginning of the current video, or forward to the beginning of the next:

These new buttons are disabled by default currently, and all configuration is handled in the skin.json.

Sample configuration needed in order to enable buttons is shown below.

skin.json
{
  "skipControls": {
    "enabled": true
  }
}

With inline skin overrides

{
  "skin": {
    "inline": {
      "skipControls": {
        "enabled": true
      }
    }
  }
}

Example: Customizing skip buttons times

skin.json
{
  "skipControls": {
    "enabled": true,
    "skipBackwardTime": 5,
    "skipForwardTime": 30
  }
}

Using inline skin overrides

{
  "skin": {
    "inline": {
      "skipControls": {
        "enabled": true,
        "skipBackwardTime": 5,
        "skipForwardTime": 30
      }
    }
  }
}

Example: Disabling buttons individually

The example below removes the Previous Video and Next video buttons and only shows Skip Forward/Back. Note that each individual button is enabled by default when the controls as a whole are enabled.

skin.json
{
  "skipControls": {
    "enabled": true,
    "buttons": {
      "previousVideo": {
        "enabled": false
      },
      "nextVideo": {
        "enabled": false
      }
    }
  }
}

Using inline skin overrides

{
  "skin": {
    "inline": {
      "skipControls": {
        "enabled": true,
        "buttons": {
          "previousVideo": {
            "enabled": false
          },
          "nextVideo": {
            "enabled": false
          }
        }
      }
    }
  }
}

Example: Customizing button order

The configuration below results in the following button order: Skip Backward, Previous Video, Next Video, Skip Forward.

skin.json
{
  "skipControls": {
    "enabled": true,
    "buttons": {
      "previousVideo": {
        "index": 2
      },
      "skipBackward": {
        "index": 1
      },
      "skipForward": {
        "index": 4
      },
      "nextVideo": {
        "index": 3
      }
    }
  }
}

Using inline skin overrides

{
  "skin": {
    "inline": {
      "skipControls": {
        "enabled": true,
        "buttons": {
          "previousVideo": {
            "index": 2
          },
          "skipBackward": {
            "index": 1
          },
          "skipForward": {
            "index": 4
          },
          "nextVideo": {
            "index": 3
          }
        }
      }
    }
  }
}
https://help.ooyala.com/sites/all/libraries/dita/en/video-platform/concepts/pbv4_components_skip.html

Was this article helpful?