See also Video.js Options Reference

Prefered audio / subtitle languages

When the playback starts, audio and subtitle languages are selected using the following rule:

1. Language set in player options
2. Document language (lang attribute on html tag)
3. Browser preferred language

The following player options can be used to set the user preferences:

options['audioLanguage'] = session.preferences['audioLang'];
options['subtitleLanguage'] = session.preferences['subtitlesLang'];

The HTML5 reference player demonstrates how to use the preferences API in Exposure to store/retrieve
user preferences.

Error messages translation

Emp-Player uses VideoJS localisation features. For more information see VideoJS documentation
Custom language dictionaries can be added using the languages option:

options.languages = {
  'fr' : {
    'No valid entitlement found for asset': 'Vous ne disposez pas de droits suffisants pour lire cette vidéo.',
    'The session token is not valid.': "Votre session n'est plus valide."
  }
};

Controls

EMP-Player has a set of default controls. These can be disabled or have their behaviour changed by overriding the controlBar option before initialising the player.
The available controls are:

  options['controlBar'] = {
    'volumePanel': {
      'inline': true,
    },
    'chromeCastButton': {
      'appId': 'YOUR Receiver App-Id'
    },
    'empTimeDisplay': {
      'mode': 'currentTime'
    },
    'empTimeDisplay2': {
      'mode': 'remainingTime'
    },
    children: [
      'empPlayToggle',
      'empReloadButton',
      'empStopButton',
      'empPreviousButton',
      'empRewindButton',
      'empForwardButton',
      'empNextButton',
      'empLiveDisplay',
      'volumePanel',
      'empTimeDisplay',
      'timeDivider',
      'durationDisplay',
      'progressControl',
      'empTimeDisplay2',
      'customControlSpacer',
      'empRestartButton',
      'playbackRateMenuButton',
      'chaptersButton',
      'bitrateButton',
      'audioTrackButton',
      'subsCapsButton',
      'playlistButton',
      'airplayToggle',
      'fullscreenToggle'
    ]
  };

  options['controls'] = true;

It's possible to change control options and change order by set the options.

How to disable a control

The control option should be set to false before initialising the player:

options['controlBar'] = {
  'empForwardButton': false,
};

How to disable all controls

options['controls'] = false; // Without controls the only way to start the video playing is with the autoplay attribute or through the Player API.

How to display a vertical volume slider

By default, EMP Player will display an horizontal volume slider, which appears when the mouse is hovers above the volume button. If, however, you prefer a vertical menu, you can do so by setting the following options before initialising the player:

options['controlBar'] = {
  'volumePanel': {
    'inline': false
  }
};

How to change the timer behaviour

By default, EMP Player will display a countdown timer next to the progress bar with the time remaining until the end of the asset (or the live edge when watching a live stream). If, however, you want to display the current time (when playing a live stream), you can change empTimeDisplay control behaviour by using the mode option, and setting it to currentTime.

options['controlBar'] = {
  'empTimeDisplay': {
    'mode': 'currentTime'
  }
};

How to add custom button

Use LastViewedOffset

Note: It is preferable to use startPlayback() with playbackProperties.playFrom="bookmark" instead of useLastViewedOffset.

As a developer, you are able to allow the user to continue watching from a previous point in the playback (multi-device session shifting), by setting the flag 'useLastViewedOffset' to true.

options['useLastViewedOffset'] = true;

Start time

Note: It is preferable to use startPlayback() with playbackProperties.playFrom="startTime " instead of absoluteStartTime.

Playback can start from a specific start time. The following player options can be used to set

• options.startTime (Optional) Start time in seconds. Defaults to 0 for VOD and to the live edge for live.
• options.absoluteStartTime (Optional) Start time in milliseconds since 1970/01/01. It overrides options.startTime.

Error handling:

• If absoluteStartTime is set to a position after the live edge, the playback will start from live edge
• If absoluteStartTime is set to a position before the stream start time, the playback will start from beginning of the stream

Media Info bar

A media infomation bar is showed together with control bar if any mediaInfo option is enabled.

 options['mediaInfo'] = {
    artworkEnable = true;
    titleEnable = true;
    subtitleEnable = true;
    logoEnable = true;

optional for external streams

 options['mediaInfo'] = {
    artworkUrl = '';  // optional media picture url, overrides by backend 
    title = '';  // optional title, overrides by backend 
    subtitle = '';  // optional description, overrides by backend 
    logoUrl = '';  // optional channel logo url, overrides by backend 

VTT Thumbnails (sprites)

Displays thumbnails on progress bar hover, driven by external VTT files.
EMP backend support thumbnails VTT files for all VoD streams.

To enable thumbnails set the option enableThumbnails:

 options['enableThumbnails'] = true; // Default is false

The path to the VTT file is relative to the media source (mpd/m3u8).

To change the default relative url:

  myPlayer.vttThumbnails().options({src: 'sprites/sprites.vtt'})

The thumbnail will auto scale depending of the player width.

To force a scale for the thumbnail

  myPlayer.vttThumbnails().options({scale: 2})

To change the Thumnails style and position override the properties of the CSS class: vjs-vtt-thumbnail-display

Reset and Reload Live streaming

Shaka have performance issues with live profile and large timeshift depths.
Especially on Chromecast version 1 where it can be a lot of buffring after some hours.
Default the player reset and reload after 2h on Chromecast and 6h on Web.
Note: Only for live streams and when playback with Shaka.
This feature can be turned off or configuerated with option resetAndReloadLive.

options['resetAndReloadLive'] = false; //Turn off 
options['resetAndReloadLive'] = 120; //120 minutes

Autoplay

• options.autoplay, the playback will automatically start when it is loaded. (Default behaviour).

• true: autoplay using the browser behavior

• false: do not autoplay

• 'play': call play() on every loadstart

• 'muted': call muted() then play() on every loadstart

• 'any': call play() on every loadstart. if that fails call muted() then play().

• *: values other than those listed here will be set autoplay to true

PlaybackRates

Type: Array

An array of numbers strictly greater than 0, where 1 means regular speed
(100%), 0.5 means half-speed (50%), 2 means double-speed (200%), etc.
If specified, Video.js displays a control (of class vjs-playback-rate)
allowing the user to choose playback speed from among the array of choices.
The choices are presented in the specified order from bottom to top.

For example:

  options.playbackRates: [0.5, 1, 1.5, 2];

Other playback options

• options.timeShiftDisabled When set to true, the user will not be allowed to timeshift the live stream.
• options.minDvrWindow When the live playlist duration is greater than the minDvrWindow threshold, DVR seeking is enabled and scrub bar is visibel
• options.autoplay, the playback will automatically start when it is loaded. (Default behaviour).
• options.muted, Will silence any audio by default.
• options.language, A language code matching one of the available languages in the player. This sets the initial language for a player, but it can always be changed.
• options.maxBitrate, Set Max Bitrate kbits/sec
• options.loop, Causes the video to start over as soon as it ends.
• options.poster, A URL to an image that displays before playback starts in the player. This is often a frame of the video or a custom title screen. As soon as the user hits "play" the image will go away.
• options.height, Sets the display height of the video player in pixels.
• options.width, Sets the display width of the video player in pixels.
• options.fluid, When true, the Video.js player will have a fluid size. In other words, it will scale to fit its container.
• epgPollingDisabled, Turn off polling for EPG

More Video.js Options

Extending video.js

video.js is now bundled inside empPlayer which means that for UI customisations and registering new components one must use the videojs instance inside empPlayer and not the one available in the window object (if available).

empPlayer.videojs.registerComponent(...);

Shaka tech options

For Dash playback to work correctly with live streams, the client clock needs to be synchronised with EMP backend. The player does that automatically but you can pass the time API URL in the player options:

options['empshaka'] = {
  clockSyncUri: '{EMP exposure URL}/v1/customer/{cu}/businessunit/{bu}/time',
  liveDelay:  2, //Add extra liveDelay in seconds
  streamrootkey: "YOUR_STREAMROOT_KEY", //use peer-to-peer plugin for MPEG-DASH (Streamroot),
  ignoreSuggestedPresentationDelay: false, //If true will cause DASH parser to ignore suggestedPresentationDelay from manifest. Defaults to false if not provided.  
  abr: {
        'defaultBandwidthEstimate': 5e6 // 5e6 = 5Mbps, this is used by the player to select the best startup bitrate
        'bandwidth_upgrade_target': 0.85 // The fraction of the estimated bandwidth which we should try to use when upgrading.
        'bandwidth_downgrade_target': 0.95 // The largest fraction of the estimated bandwidth we should use. We should downgrade to avoid this.
        'switch_interval_ms': 8000 // The minimum amount of time that must pass between switches, in seconds. This keeps us from changing too often and annoying the user.
        'minBytes': 16e3;  // 16kB Minimum number of bytes, under which samples are discarded.  Our models do not include latency information, 
                    // so connection startup time (time to first
                    // byte) is considered part of the download time.  Because of this, we should
                    // ignore very small downloads which would cause our estimate to be too low.
                    // If this value is too large the ABR might not work at all.
                    // This specific value is based on experimentation.
        'minTotalBytes': 128e3;  // 128kB Minimum number of bytes sampled before we trust the estimate.  If we have
                          // not sampled much data, our estimate may not be accurate enough to trust.
                          // If bytesSampled_ is less than minTotalBytes_, we use defaultEstimate_.
                          // This specific value is based on experimentation.
    }
}

Startup bitrate (defaultBandwidthEstimate)
When playing a Dash asset, the HTML5 player ABR engine tries to estimate the available bandwidth in order to select the best bitrate. At startup however, no data has been sampled, and the the player will use a default bandwidth of 500kbps. You may want to increase that default value in order to start the playback with a better quality, and not have to wait until the ABR engine kicks in.