frontend-mls

Integration guide MLS React Player Component

Install the MCLS player from npm

npm install frontend-mls
or
yarn add frontend-mls
...

import Player from 'frontend-mls'
...

<Player
  eventId="EVENT_ID"
  publicKey="PUBLIC_KEY"
>
Overlay text
</Player>

Suported parameters:

• Required

• eventId: (string) The event id
• publicKey: (string) The organisation key

• Optional

• identityToken: (string) A JWT token for the MCLS API.

• autoplay - boolean (false) - Controls the autoplay function.

• primaryColor - string (#FFF). Should be a valid css color value

• secondaryColor - string (#FFF). Should be a valid css color value

• defaultVolume - float (1). Should be a value between 0-1 (0 for mute, 1 for 100%)

• startPosition - float (0). Should be a value in seconds for the position where the video should start playing from.

• adUnit - string (the iu query parameter from the IMA tag url)

• adCustParams - string (url encoded values or valid json representing the custom parameters that should be added to the IMA tag url in the query parameter cust_params)

• showBackForwardButtons - boolean (true) Controls visibility of seek backwards and forwards buttons

• showInfoButton - boolean (true) Controls visibility of info button with event information

• showLiveViewers - boolean (true) Controls visibility of the live viewers number

• showSeekbar - boolean (true) Controls visibility of the seekbar

• showFullscreen - boolean (true) Controls the visibility of the full screen button

• showQualitySelector - boolean (true) Controls the visibility of the quality selector

• showVolume - boolean (true) Controls the visibility of the volume controller button

• showTimers - boolean (true) Constrols the visibility of the player time labels

• showChromecast - boolean (true) Controls the visibility of the Chromecase button

• showPictureInPicture - boolean (true) Constrols the visibility of the picture-in-picture button

• enableAnnotations - boolean (true) Enables or disabled event annotations

• annotations - array <AnnotationAction> ([]) Overwrites the mcls annotations

• analyticsType - string (youbora | mux)

• analyticsAccount - string - Sets the account name for analytics

• analyticsUserId - string - Sets the user id for analytics

• customPlaylistUrl - string - Set a custom playlist url, to overwrite the event one

• onTimeUpdate - (currentTime: number, totalTime: number) => void, Function to be called with the player's current and total times

• info - ReactNode, React node to be rendered instad of the default info overlay

• seekTo - number, Time to which the player to seek to

• totalViewers - number, Overwrites the mcls total live viewers

• children - ReactNode, All the children of the player component will be injected into the player container