Enact
Edit on GitHub

moonstone/MediaOverlay

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
css
Object

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 image

  • textLayout - class name for text layout

imageOverlay
StringObject

Image path for image overlay.

NOTE: When image is displayed, media is not displayed even though it is playing.

mediaComponent
StringComponent

Media component to use.

The default ('video') renders an HTMLVideoElement. Custom media components must have a similar API structure, exposing the following APIs:

Methods:

  • load() - load media

Default: 'video'
placeholder
String

Placeholder for image overlay.

source
Node

Any children <source> tag elements will be sent directly to the media element as sources.

text
String

Text to display over media.

textAlign
String

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';
ArrayBooleanFunctionModuleNumberObjectString