Enact

moonstone/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

import {VideoPlayerBase} from '@enact/moonstone/VideoPlayer';
Properties
autoCloseTimeout
Number

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
String

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
String

Specifies the spotlight container ID for the player

disabled
Boolean

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
Number

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
String

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
Node

These components are placed into the slot to the left of the media controls.

initialJumpDelay
Number

The number of milliseconds that the player will pause before firing the first jump event on a right or left pulse.

Default: 400
jumpBackwardIcon
String

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
Boolean

Sets the disabled state on the media "jump" buttons; the outer pair.

jumpBy
Number

The number of seconds the player should skip forward or backward when a "jump" button is pressed.

Default: 30
jumpDelay
Number

The number of milliseconds that the player will throttle before firing a jump event on a right or left pulse.

Default: 200
jumpForwardIcon
String

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
Node

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
Boolean

Manually set the loading state of the media, in case you have information that VideoPlayer does not have.

miniFeedbackHideDelay
Number

Amount of time (in milliseconds), after the last user action, that the miniFeedback will automatically hide. Setting this to 0 or null disables miniFeedbackHideDelay; miniFeedback will always be present.

Default: 2000
moreButtonCloseLabel
String

The label for the "More" button for when the "More" tray is open. This will show on the tooltip.

Default: 'Back'
moreButtonDisabled
Boolean

This boolean sets the disabled state of the "More" button.

moreButtonLabel
String

The label for the "More" button. This will show on the tooltip.

Default: 'More'
muted
Boolean

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
Boolean

Setting this to true will disable left and right keys for seeking.

Default: false
noAutoPlay
Boolean

By default, the video will start playing immediately after it's loaded, unless this is set.

Default: false
noJumpButtons
Boolean

Removes the "jump" buttons. The buttons that skip forward or backward in the video.

Default: false
noMiniFeedback
Boolean

Removes the mini feedback.

Default: false
noRateButtons
Boolean

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
Boolean

Removes the media slider.

Default: false
onBackwardButtonClick
Function

Function executed when the user clicks the Backward button. Is passed a moonstone/VideoPlayer.videoStatus as the first argument.

onControlsAvailable
Function

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

Function executed when the user clicks the Forward button. Is passed a moonstone/VideoPlayer.videoStatus as the first argument.

onJumpBackwardButtonClick
Function

Function executed when the user clicks the JumpBackward button. Is passed a moonstone/VideoPlayer.videoStatus as the first argument.

onJumpForwardButtonClick
Function

Function executed when the user clicks the JumpForward button. Is passed a moonstone/VideoPlayer.videoStatus as the first argument.

onPlayButtonClick
Function

Function executed when the user clicks the Play button. Is passed a moonstone/VideoPlayer.videoStatus as the first argument.

onScrub
Function

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 the thumbnailSrc to the reflect the current scrub position.

onSeekFailed
Function

Function executed when seek is attemped while seekDisabled is true.

pauseAtEnd
Boolean

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
String

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
String

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
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
Boolean

Sets the disabled state on the media playback-rate control buttons; the inner pair.

rightComponents
Node

These components are placed into the slot to the right of the media controls.

seekDisabled
Boolean

When true, seek function is disabled.

Note that jump by arrow keys will also be disabled when true.

source
Node

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
Boolean

When true, the component cannot be navigated using spotlight.

thumbnailComponent
Node

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
StringObject

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 no thumbnailComponent and no thumbnailSrc is set, no tooltip will display.

thumbnailUnavailable
Boolean

Enables the thumbnail transition from opaque to translucent.

title
String

Set a title for the video being played.

titleHideDelay
Number

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
Number

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, and proportionPlayed.

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 and 1 representing the proportion of the media that has loaded

proportionPlayed
Number

A value between 0 and 1 representing the proportion of the media that has already been shown

ArrayBooleanFunctionModuleNumberObjectString