Function UIContainer

The container component for a THEOplayer UI.

This component provides a basic layout structure for a general player UI, and handles the creation and management of a THEOplayer player instance for this UI.

Usage

1. Create a <UIContainer> component, passing a valid player configuration as its configuration property and a valid stream source as its source property. Additionally, place your UI components into one of the slots of the <UIContainer>, such as

   <UIContainer
       configuration={{
           license: 'your_license_goes_here',
           libraryLocation: '/path/to/node_modules/theoplayer/'
       }}
       source={{
           sources: [{ src: 'https://example.com/my_stream.m3u8', type: 'application/x-mpegurl' }]
       }}
       // ...
   />
   Copy

2. Place your UI components into one of the slots of the <UIContainer>, such as UIContainerProps.bottomChrome or UIContainerProps.centeredChrome. You can use the provided THEOplayer UI components (such as PlayButton or TimeRange), or use any of your own components.

   <UIContainer
       // ...
       topChrome={<span class="title">My awesome video</span>}
       centeredChrome={<PlayButton />}
       bottomChrome={
           <>
               <ControlBar>
                   <TimeRange />
               </ControlBar>
               <ControlBar>
                   <PlayButton />
                   <MuteButton />
                   <TimeDisplay />
                   <FullscreenButton />
               </ControlBar>
           </>
       }
   />
   Copy

Customization

This component does not provide any UI components by default, you need to add all components as children of one of the <UIContainer> slots. If you're looking for a simple out-of-the-box player experience instead, see DefaultUI.

See UIContainer in @theoplayer/web-ui.