frontend-mls
v1.0.0-rc.22
Published
Install the MCLS player from npm
Downloads
46
Readme
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 idpublicKey
: (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 valuesecondaryColor
- string (#FFF). Should be a valid css color valuedefaultVolume
- 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 buttonsshowInfoButton
- boolean (true) Controls visibility of info button with event informationshowLiveViewers
- boolean (true) Controls visibility of the live viewers numbershowSeekbar
- boolean (true) Controls visibility of the seekbarshowFullscreen
- boolean (true) Controls the visibility of the full screen buttonshowQualitySelector
- boolean (true) Controls the visibility of the quality selectorshowVolume
- boolean (true) Controls the visibility of the volume controller buttonshowTimers
- boolean (true) Constrols the visibility of the player time labelsshowChromecast
- boolean (true) Controls the visibility of the Chromecase buttonshowPictureInPicture
- boolean (true) Constrols the visibility of the picture-in-picture buttonenableAnnotations
- boolean (true) Enables or disabled event annotationsannotations
- array <AnnotationAction> ([]) Overwrites the mcls annotationsanalyticsType
- string (youbora
|mux
)analyticsAccount
- string - Sets the account name for analyticsanalyticsUserId
- string - Sets the user id for analyticscustomPlaylistUrl
- string - Set a custom playlist url, to overwrite the event oneonTimeUpdate
- (currentTime: number, totalTime: number) => void, Function to be called with the player's current and total timesinfo
- ReactNode, React node to be rendered instad of the default info overlayseekTo
- number, Time to which the player to seek tototalViewers
- number, Overwrites the mcls total live viewerschildren
- ReactNode, All the children of the player component will be injected into the player container