ui/Media

A representation of HTMLMediaElement component with an ability to attach a custom event handler.

Import Usage

import Media from '@enact/ui/Media';

Members

Media   Component

A component representation of HTMLMediaElement.

Import Usage

import Media from '@enact/ui/Media';

Properties

Required Property •  mediaComponent

StringComponent

A type of media component.

---

customMediaEventsMap

Object

An event map object for custom media events.

List custom events that aren't standard to React. These will be directly added to the media element and props matching their name will be executed as callback functions when the event fires.

Example:

{'umsmediainfo': 'onUMSMediaInfo'} // `onUMSMediaInfo` prop function will execute when the `umsmediainfo` event happens

---

mediaEventsMap

Object

A event map object for media events.

Default: {@link ui/Media.handledMediaEventsMap}

---

onUpdate

Function

A function to be run when media updates.

---

source

Any

Media sources passed as children to mediaComponent

See: https://developerhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/source

getKeyFromSource   Function

getKeyFromSource( source ) → String

Generates a key representing the source node or nodes provided

Example:

getKeyFromSource('path/file.mp4'); // 'path/file.mp4'
getKeyFromSource(
	<source src="path/file.mp4" type="video/mp4" />
); // 'path/file.mp4'
getKeyFromSource([
	<source src="path/file.mp4" type="video/mp4" />,
	<source src="path/file.ogg" type="video/ogg" />,
]); // 'path/file.mp4+path/file.ogg'

1 Param

source String | Element | Array(Element)

 default: ''

URI for a source, <source> node, or array of <source> nodes

Returns

 String

Key representing sources

Type Definitions

handledMediaEventsMap   Object

Maps standard media event type values to React-style callback prop names

See https://reacthttps://react.dev/reference/react-dom/components/common#common-props

{
  abort           : 'onAbort',
  canplay         : 'onCanPlay',
  canplaythrough  : 'onCanPlayThrough',
  durationchange  : 'onDurationChange',
  emptied         : 'onEmptied',
  encrypted       : 'onEncrypted',
  ended           : 'onEnded',
  error           : 'onError',
  loadeddata      : 'onLoadedData',
  loadedmetadata  : 'onLoadedMetadata',
  loadstart       : 'onLoadStart',
  pause           : 'onPause',
  play            : 'onPlay',
  playing         : 'onPlaying',
  progress        : 'onProgress',
  ratechange      : 'onRateChange',
  seeked          : 'onSeeked',
  seeking         : 'onSeeking',
  stalled         : 'onStalled',
  suspend         : 'onSuspend',
  timeupdate      : 'onTimeUpdate',
  volumechange    : 'onVolumeChange',
  waiting         : 'onWaiting'
}