@mycujoo/mcls-player v1.0.0-rc.8
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.
8 months ago
10 months ago
10 months ago
10 months ago
8 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
8 months ago
10 months ago
5 months ago
5 months ago
5 months ago
5 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago