frontend-mls v1.0.0-rc.22

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