limestone/MediaOverlay

Provides a media component with image and text overlay support.

Loading Live Preview

Members

MediaOverlay Component

A Limestone-styled Media component.

Usage:

<MediaOverlay>
    <source type='' src=''/>
</MediaOverlay>

Extends: limestone/MediaOverlaylimestone/MediaOverlay.MediaOverlayBase
Wrapped with: limestone/MediaOverlaylimestone/MediaOverlay.MediaOverlayDecorator

MediaOverlayBase Component

A media component with image and text overlay support.

Properties

source

Node

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

caption

Node

The primary caption to be displayed.

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.

loop

Boolean

Restarts the video every time it is finished.

marqueeOn

'focus''hover''render'

Determines what triggers the marquee to start its animation.

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'

muted

Boolean

Mutes the audio output of the video.

noAutoPlay

Boolean

Prevents the video playback starting on load.

placeholder

String

Placeholder for image overlay.

progress

Number

A number between 0 and 1 indicating the proportion of the filled portion of the bar.

Only applicable when showProgress is enabled.

Default: 0

showProgress

Boolean

Displays the progress bar

subtitle

String

The third caption line to be displayed.

text

String

Text to display over media.

textAlign

'center''end''start'

Aligns the text vertically within the component.

Default: 'end'

title

String

The second caption line to be displayed.

MediaOverlayDecorator Higher-Order Component

A higher-order component that adds Limestone specific behaviors to MediaOverlay.

Includes: limestone/Marqueelimestone/Marquee.MarqueeController
Includes: spotlight/Spottablespotlight/Spottable.Spottable
Includes: ui/Slottableui/Slottable.Slottable
Includes: limestone/Skinnablelimestone/Skinnable.Skinnable