Skip to main content

Custom Medias

If you need to add any of your medias to the WebPlayer's, without changing the composition file ... there is a way of adding your elements directly to the carrousel !

Adding Custom Media​

You can add custom media to the WebPlayer by importing the WebPlayerCustomMedia component. It needs to be a child of the WebPlayer component. You can then add any media type to the carrousel, such as images, videos, ... simply by adding them as children of the WebPlayerCustomMedia component.

Properties

  • index: specify the position of the custom media in the carrousel. You can use negative values to add the media at the end of the carrousel.
  • thumbnailSrc: the thumbnail image to display in the gallery

Example

WebPlayerWithCustomImages.tsx
import { WebPlayer, WebPlayerCustomMedia } from "@car-cutter/framework-webplayer";

<WebPlayer ...>
  <WebPlayerCustomMedia index={2} thumbnailSrc="...">
    <img src="..." />
  </WebPlayerCustomMedia>
  <WebPlayerCustomMedia index={-1} thumbnailSrc="...">
    <img src="..." />
  </WebPlayerCustomMedia>
</WebPlayer>
tip

You can put as many Custom Medias as you want in the Web Player.

warning

Technically, you can add any HTLM element to the carrousel but keep in mind that it can interfer with the WebPlayer's functionalities.