@mycujoo/mcls-player
v1.0.0-rc.8
Published
`@mycujoo/mcls-player` uses video.js player internally and exports a few React.js components:
Downloads
8
Maintainers
Keywords
Readme
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 functionalityVideoFLV
- bare video.js react component that uses flv.js for flash videoPlayer
- 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 ofPlayerStateContext
andAnnotationsContext
(both available in this package); Useful for when controlling the player state and annotations is needed. Internally usesVideoJS
componentPlayerWithContexts
- Same asPlayer
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 ofPlayerStateContext
,AnnotationsContext
andEventContext
(from @mycujoo/mcls-data-providers)EventPlayerWithContexts
- Same asEventPlayer
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 qualityauth
(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.