Media
Gesture
This component enables actions to be performed on the media based on user gestures.
Usage
The <media-gesture>
component enables actions to be performed on the media provider based on defined user gestures. Some examples include:
- Clicking or touching the player to toggle playback.
- Double-pressing the player to toggle fullscreen.
- Tapping the sides of the player to seek forwards or backwards.
- Pausing media when the user's mouse leaves the player.
Event
The action
property seen in the snippet above can be any valid DOM event type (e.g., touchstart
, mouseleave
, etc.). An event listener is attached to the given event type on the media outlet, and when fired, it will trigger the action
on the media provider.
In addition, any event can be prefixed with dbl
(e.g., dblpointerup
) to ensure it's fired twice in succession (within 200ms) before the gesture action is triggered.
Action
The action
property represents the media state change that will occur when the gesture is performed.
Contextual Menu
Due to event listeners being attached directly to the media outlet, they don't block the video element's contextual menu (i.e., the menu opened when you right-click the video element):
Positioning
Gestures are absolutely positioned, sized, and layered with CSS like so:
Tailwind
Component API
Props
Name | Type |
---|---|
|
GestureEventType
|
|
GestureAction
|
Events
Name | Type |
---|
Name | Description |
---|
CSS VarsLearn more about cssVars
Name | Type |
---|
CSS PartsLearn more about cssParts
Name | Description |
---|
Instance Props
Name | Type |
---|
Instance Methods
Name | Type |
---|