@mycujoo/mcls-player

MCLS Player

@mycujoo/mcls-player uses video.js player internally and exports a few React.js components:

• VideoJS - bare video.js react component with minimum added functionality
• VideoFLV - bare video.js react component that uses flv.js for flash video
• Player - video player component that has support for player state and annotations and integrations with some specialized video.js plugin; This Player needs to be in the context of PlayerStateContext and AnnotationsContext (both available in this package); Useful for when controlling the player state and annotations is needed. Internally uses VideoJS component
• PlayerWithContexts - Same as Player but with the two contexts already provided.
• EventPlayer - video player component that plays a specific MCLS event and handles data fetching and the logic for which player screen to display (eg. geoblocking, scheduled events etc.); Needs to be a child of PlayerStateContext, AnnotationsContext and EventContext (from @mycujoo/mcls-data-providers)
• EventPlayerWithContexts - Same as EventPlayer but with all contexts already provided.

Please check this CodeSandbox for examples.

VideoJS

Props:

• source (string, required): The URL of the video source to be played.
• autoplay (boolean, optional): If true, the video will automatically start playing when loaded.
• autoSeekToLiveEdge (boolean, optional): If true, the video player will seek to the live edge of the video when playing live streams.
• debug (boolean, optional): If true, enables debug mode for the video player.
• playsInline (boolean, optional): If true, the video will play inline within the element's layout on supported devices.
• controls (boolean, optional): If true, shows the video controls (play/pause, volume, etc.).
• showSeekbar (boolean, optional): If true, shows the seek bar on the video player controls.
• showFullscreen (boolean, optional): If true, shows the fullscreen button on the video player controls.
• showQualitySelector (boolean, optional): If true, shows the quality selector for choosing different video quality options.
• showVolume (boolean, optional): If true, shows the volume control on the video player.
• showTimers (boolean, optional): If true, shows the current time and duration timers on the video player.
• showChromecast (boolean, optional): If true, shows the Chromecast button for casting the video.
• showPictureInPicture (boolean, optional): If true, shows the picture-in-picture button for enabling picture-in-picture mode.
• showLiveUI (boolean, optional): If true, shows UI elements related to live streaming.
• volume (number, optional): The initial volume level of the video player (0 to 1).
• width (CSS.Property.Width, optional): The width of the video player.
• height (CSS.Property.Height, optional): The height of the video player.
• chromecastCustomData (object, optional): Custom data required for Chromecast integration. Should have the following properties:
  • eventId (string): The event ID.
  • publicKey (string): Public key for authentication.
  • identityToken (string): Identity token for authentication.
  • customPlaylistUrl (string): URL of the custom playlist.
  • pseudoUserId (string): Pseudo user ID.
  • receiverAppID (string): Receiver app ID for Chromecast.
• drm (DRM, optional): Digital Rights Management configuration.
• posterUrl (string, optional): URL of the poster image to be displayed before the video starts playing.
• liveTolerance (number, optional): Number of seconds behind live that the video player can be before it's considered non-live. Only used when playing at the live edge. Defaults to 15 seconds.
• limitAutoQualityToPlayerSize (boolean, optional): If true, the player's automatic quality selection won't choose a rendition larger than the player dimensions. Defaults to true.
• startAtMaxQuality (boolean, optional): If true, the player's will disregard bandwidth size in the inital segment calculation and force the player to load the highest quality
• auth (string, optional): Authorization token to be used for fetching the stream.

Event Handlers:

• onPlayerInit (function): Called when the video player is initialized. Receives the extended Video.js instance as a parameter.

• onPlayerActive (function): Called when the video player becomes active.

• onPlayerReady (function): Called when the video player is ready.

• onClick (function): Called when the video player is clicked.

• onError (function): Called when an error occurs. Receives an optional error parameter.

• onPlay (function): Called when the video starts playing.

• onTimeUpdate (function): Called when the playback time is updated. Receives the current time in seconds.

• onFirstPlay (function): Called when the video starts playing for the first time.

• onPause (function): Called when the video playback is paused.

• onSeeked (function): Called when the video seeking operation is completed. Receives the current time in seconds after seeking.

• onSeeking (function): Called while the video is in the process of seeking. Receives the current time in seconds during seeking.

• onWaiting (function): Called when the video playback is temporarily paused due to buffering. Receives the current time in seconds.

• onEnd (function): Called when the video playback reaches the end.

• onDispose (function): Called when the video player component is disposed of or unmounted.

• onLoadedMetadata (function): Called when the metadata of the video is successfully loaded. Receives the loaded metadata as an unknown value.

• onQualityChange (function): Called when the video quality is changed by the user or automatically. Receives the new quality information as an object with the following properties:

  • bitrate (number): The bitrate of the new quality.
  • height (number): The height of the new quality.
  • width (number): The width of the new quality.

• children (ReactNode, optional): Any additional React components that you want to render within the video player component.