1. Sliders
  2. Slider Video

Sliders

Slider Video

This component is used to load and display a preview video over a slider.

Usage

The <media-slider-video> component can be used to load a video in a slider. This is generally used to show a preview video (low-resolution) as the user interacts with the time slider.

The point at which the user is hovering or dragging (pointerValue) is the preview time position. The video will automatically be synced with said value, so ensure both the preview and loaded video are of the same length (i.e., duration).

          
        

Video Attributes

The following video attributes are applied to the media-slider-video element:

  • can-play: Present when the video is ready for playback.
  • error: Present when media loading fails.
        <media-slider-video error />

      

You can use these attributes to further style the slider video as it's being loaded, such as hiding it before media is ready or if it fails to load.

Video Events

The native video canplay and error events are re-dispatched by this component for you to listen to if needed.

          
        

Styling

You can override the default styles with CSS like so:

        /* Override default styles. */
media-slider-video {
}

/* Apply styles to the underlying `<video>` element. */
media-slider-video video {
  width: 156px;
}