Media

Media Outlet

This component is used as a render target for the current provider.

# Usage

The <media-outlet> component serves as a render target for providers and gives you complete control of where the provider will be rendered in the DOM. For example, the VideoProvider will render the HTML <video> element inside of it.

In a typical video player setup, you'll place the outlet directly in the player and overlay some UI (e.g., controls) over it like so:

# Layouts

The media outlet makes it simple to create player layouts that can be swapped between since you have control of where the provider will be rendered. You can adapt layouts based on the current device (e.g., mobile/desktop), media type (e.g., audio/video/live), modes (e.g., focus/theatre), etc.

Do note, the aspect ratio setting on the player is only applied to the <media-outlet> component so any UI elements outside will be unaffected.

        media-player[data-live] {
}

media-player:not([data-live]) {
}

      

# Slotting

Arbitrary content can be inserted inside the provider output by placing it inside the media outlet and positioning it with CSS. This can be useful if parts of the media UI such as controls live outside the provider region.

          
1
2
3
4
5
6
7
8
		    

# Moving

The media outlet can be safely detached from the player and moved around the DOM after it has connected. This can be useful for creating floating, popout, and mini players.

          
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17