moonstone/ Media Overlay
Provides a media component with image and text overlay support.
import MediaOverlay from '@enact/moonstone/MediaOverlay';
Members
MediaOverlayComponent
A Moonstone-styled Media
component.
Usage:
<MediaOverlay>
<source type='' src=''/>
</MediaOverlay>
import MediaOverlay from '@enact/moonstone/MediaOverlay';
MediaOverlayBaseComponent
A media component with image and text overlay support.
import {MediaOverlayBase} from '@enact/moonstone/MediaOverlay';
Properties
Customizes the component by mapping the supplied collection of CSS class names to the corresponding internal Elements and states of this component.
The following classes are supported:
image
- class name for imagetextLayout
- class name for text layout
Image path for image overlay.
NOTE: When image is displayed, media is not displayed even though it is playing.
Media component to use.
The default (
'video'
) renders anHTMLVideoElement
. Custom media components must have a similar API structure, exposing the following APIs:Methods:
load()
- load media
Default: 'video'Placeholder for image overlay.
Any children
<source>
tag elements will be sent directly to the media element as sources.Text to display over media.
Aligns the
text
vertically within the component.Allowed values are:
"center"
, the default, aligns the text in the middle"start"
aligns the text to the top"end"
aligns the text to the bottom
Default: "center"
MediaOverlayDecoratorHigher-Order Component
A higher-order component that adds Moonstone specific behaviors to MediaOverlay
.
import {MediaOverlayDecorator} from '@enact/moonstone/MediaOverlay';