moonstone/ Video Player
Exports the moonstone/VideoPlayer.VideoPlayer and moonstone/VideoPlayer.VideoPlayerBase components. The default export is moonstone/VideoPlayer.VideoPlayer.
import VideoPlayer from '@enact/moonstone/VideoPlayer';
Members
VideoPlayerComponent
moonstone/VideoPlayer.VideoPlayer is a standard HTML5 video player for Moonstone. It
behaves, responds to, and operates like a standard <video>
tag in its support for <source>
s
and accepts several additional custom tags like <infoComponents>
, <leftComponents>
, and
<rightComponents>
. Any additional children will be rendered into the "more" controls area.
Example usage:
<VideoPlayer title="Hilarious Cat Video" poster="http://my.cat.videos/boots-poster.jpg">
<source src="http://my.cat.videos/boots.mp4" type="video/mp4" />
<infoComponents>A video about my cat Boots, wearing boots.</infoComponents>
<leftComponents><IconButton backgroundOpacity="translucent">star</IconButton></leftComponents>
<rightComponents><IconButton backgroundOpacity="translucent">flag</IconButton></rightComponents>
<Button backgroundOpacity="translucent">Add To Favorites</Button>
<IconButton backgroundOpacity="translucent">search</IconButton>
</VideoPlayer>
To invoke methods (fastForward()
, hideControls()
, jump()
, pause()
, play()
, rewind()
,
seek()
, 'showControls()') or get the current state (getMediaState()
), store a ref to the
VideoPlayer
within your component:
...
setVideoPlayer = (node) => {
this.videoPlayer = node;
}
play () {
this.videoPlayer.play();
}
render () {
return (
<VideoPlayer ref={this.setVideoPlayer} />
);
}
import VideoPlayer from '@enact/moonstone/VideoPlayer';
VideoPlayerBaseComponent
A player for video moonstone/VideoPlayer.VideoPlayerBase.
import {VideoPlayerBase} from '@enact/moonstone/VideoPlayer';
Properties
- autoCloseTimeout
Amount of time (in milliseconds) after which control buttons are automatically hidden. Setting this to 0 or
null
disables autoClose, requiring user input to open and close.Default: 5000- backwardIcon
A string which is sent to the
backward
icon of the player controls. This can be anything that is accepted by moonstone/Icon.Default: 'backward'- containerId
Specifies the spotlight container ID for the player
- disabled
Removes interactive capability from this component. This includes, but is not limited to, key-press events, most clickable buttons, and prevents the showing of the controls.
- feedbackHideDelay
Amount of time (in milliseconds) after which the feedback text/icon part of the slider's tooltip will automatically hidden after the last action. Setting this to 0 or
null
disables feedbackHideDelay; feedback will always be present.Default: 3000- forwardIcon
A string which is sent to the
forward
icon of the player controls. This can be anything that is accepted by moonstone/Icon.Default: 'forward'- infoComponents
These components are placed into the slot to the left of the media controls.
- initialJumpDelay
The number of milliseconds that the player will pause before firing the first jump event on a right or left pulse.
Default: 400- jumpBackwardIcon
A string which is sent to the
jumpBackward
icon of the player controls. This can be anything that is accepted by moonstone/Icon.Default: 'skipbackward'- jumpButtonsDisabled
Sets the
disabled
state on the media "jump" buttons; the outer pair.- jumpBy
The number of seconds the player should skip forward or backward when a "jump" button is pressed.
Default: 30- jumpDelay
The number of milliseconds that the player will throttle before firing a jump event on a right or left pulse.
Default: 200- jumpForwardIcon
A string which is sent to the
jumpForward
icon of the play controls. This can be anything that is accepted by moonstone/Icon.Default: 'skipforward'- leftComponents
These components are placed below the title. Typically these will be media descriptor icons, like how many audio channels, what codec the video uses, but can also be a description for the video or anything else that seems appropriate to provide information about the video to the user.
- loading
Manually set the loading state of the media, in case you have information that
VideoPlayer
does not have.- miniFeedbackHideDelay
Amount of time (in milliseconds), after the last user action, that the
miniFeedback
will automatically hide. Setting this to 0 ornull
disablesminiFeedbackHideDelay
;miniFeedback
will always be present.Default: 2000- moreButtonCloseLabel
The label for the "More" button for when the "More" tray is open. This will show on the tooltip.
Default: 'Back'- moreButtonDisabled
This boolean sets the disabled state of the "More" button.
- moreButtonLabel
The label for the "More" button. This will show on the tooltip.
Default: 'More'- muted
Disable audio for this video. In a TV context, this is handled by the remote control, not programmatically in the VideoPlayer API.
Default: false- no5WayJump
Setting this to
true
will disable left and right keys for seeking.Default: false- noAutoPlay
By default, the video will start playing immediately after it's loaded, unless this is set.
Default: false- noJumpButtons
Removes the "jump" buttons. The buttons that skip forward or backward in the video.
Default: false- noMiniFeedback
Removes the mini feedback.
Default: false- noRateButtons
Removes the "rate" buttons. The buttons that change the playback rate of the video. Double speed, half speed, reverse 4x speed, etc.
Default: false- noSlider
Removes the media slider.
Default: false- onBackwardButtonClick
Function executed when the user clicks the Backward button. Is passed a moonstone/VideoPlayer.videoStatus as the first argument.
- onControlsAvailable
Function executed when the player's controls change availability, whether they are shown or hidden. The current status is sent as the first argument in an object with a key
available
which will be either true or false.onControlsAvailable({available: true})
- onForwardButtonClick
Function executed when the user clicks the Forward button. Is passed a moonstone/VideoPlayer.videoStatus as the first argument.
- onJumpBackwardButtonClick
Function executed when the user clicks the JumpBackward button. Is passed a moonstone/VideoPlayer.videoStatus as the first argument.
- onJumpForwardButtonClick
Function executed when the user clicks the JumpForward button. Is passed a moonstone/VideoPlayer.videoStatus as the first argument.
- onPlayButtonClick
Function executed when the user clicks the Play button. Is passed a moonstone/VideoPlayer.videoStatus as the first argument.
- onScrub
Function executed when the user is moving the VideoPlayer's Slider knob independently of the current playback position. It is passed an object with a
seconds
key (float value) to indicate the current time index. It can be used to update thethumbnailSrc
to the reflect the current scrub position.- onSeekFailed
Function executed when seek is attemped while
seekDisabled
is true.- pauseAtEnd
When
true
, the video will pause when it reaches either the start or the end of the video during rewind, slow rewind, fast forward, or slow forward.Default: false- pauseIcon
A string which is sent to the
pause
icon of the player controls. This can be anything that is accepted by moonstone/Icon.Default: 'pause'- playIcon
A string which is sent to the
play
icon of the player controls. This can be anything that is accepted by moonstone/Icon.Default: 'play'- playbackRateHash
Mapping of playback rate names to playback rate values that may be set.
Default:Show default value{fastForward: ['2', '4', '8', '16'],rewind: ['-2', '-4', '-8', '-16'],slowForward: ['1/4', '1/2'],slowRewind: ['-1/2', '-1']}- rateButtonsDisabled
Sets the
disabled
state on the media playback-rate control buttons; the inner pair.- rightComponents
These components are placed into the slot to the right of the media controls.
- seekDisabled
When
true
, seek function is disabled.Note that jump by arrow keys will also be disabled when
true
.- source
Any children
<source>
tag elements of VideoPlayer will be sent directly to the<video>
element as video sources. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source- spotlightDisabled
When
true
, the component cannot be navigated using spotlight.- thumbnailComponent
This component will be used instead of the built-in version. The internal thumbnail class will be added to this component, however, it's the responsibility of the developer to include this class in their implementation, if appropriate for their application. This component follows the same rules as the built-in version.
- thumbnailSrc
Set a thumbnail image source to show on VideoPlayer's Slider knob. This is a standard moonstone/Image component so it supports all of the same options for the
src
property. If nothumbnailComponent
and nothumbnailSrc
is set, no tooltip will display.- title
Set a title for the video being played.
- titleHideDelay
The amount of time in milliseconds that should pass before the title disappears from the controls. Setting this to
0
disables the hiding.Default: 5000- tooltipHideDelay
The amount of time in milliseconds that should pass before the tooltip disappears from the controls. Setting this to
0
disables the hiding.Default: 3000
Methods
- fastForward()
Changes the playback speed via selectPlaybackRate().
- getMediaState()Object
Returns an object with the current state of the media including
currentTime
,duration
,paused
,playbackRate
,proportionLoaded
, andproportionPlayed
.Returns
- Object
- getVideoNode()
Returns a proxy to the underlying
<video>
node currently used by the VideoPlayer- hideControls()
Hides media controls.
- jump(distance)
Step a given amount of time away from the current playback position. Like seek but relative.
1 Param
- distance Number
Time value to jump
- pause()
Programmatically plays the current media.
- play()
Programmatically plays the current media.
- rewind()
Changes the playback speed via selectPlaybackRate().
- seek(timeIndex)
Set the media playback time index
1 Param
- timeIndex Number
Time index to seek
- showControls()
Shows media controls.
- toggleControls()
Toggles the media controls.
playbackRateHashObject
A set of playback rates when media fast forwards, rewinds, slow-fowards, or slow-rewinds.
The number used for each operation is proportional to the normal playing speed, 1. If the rate is less than 1, it will play slower than normal speed, and, if it is larger than 1, it will play faster. If it is negative, it will play backward.
The order of numbers represents the incremental order of rates that will be used for each
operation. Note that all rates are expressed as strings and fractions are used rather than decimals
(e.g.: '1/2'
, not '0.5'
).
- fastForward
- ArrayString
An array of playback rates when media fast forwards
- rewind
- ArrayString
An array of playback rates when media rewinds
- slowForward
- ArrayString
An array of playback rates when media slow-forwards
- slowRewind
- ArrayString
An array of playback rates when media slow-rewinds
videoStatusObject
Every callback sent by VideoPlayer receives a status package, which includes an object with the following key/value pairs as the first argument:
- type
- String
Type of event that triggered this callback
- currentTime
- Number
Playback index of the media in seconds
- duration
- Number
Media's entire duration in seconds
- paused
- Boolean
Playing vs paused state.
true
means the media is paused- playbackRate
- Number
Current playback rate, as a number
- proportionLoaded
- Number
A value between
0
and1
representing the proportion of the media that has loaded- proportionPlayed
- Number
A value between
0
and1
representing the proportion of the media that has already been shown