components

Clip component

If you wish to incorporate headless videos into your website, similar to using an image, you can utilize the clip component. This feature proves particularly useful when you desire a video to serve as the background of your site. The clip component automatically starts playing when it becomes visible within the user’s viewport, pauses when it is no longer visible, and loops seamlessly.

<script
  type="module"
  src="https://cdn.video-dns.com/npm/@maveio/components/+esm"
></script>

<mave-clip embed="{embed id}"></mave-clip>

In contrast to the player component, the clip component requires a processing period before playback is available. After uploading, the clip will automatically become ready for use once this processing is finalized

⚠️ To ensure optimal performance across various codecs, renditions created for our clip component are limited to a maximum duration of 60 seconds.

Property Description
embed This points to a specific embed.
autoplay Defaults to lazy, but you can provide always or off (to disable autoplay).
loop Defaults true, but when provide false it can be disabled.
quality Defaults to fhd, but you can choose any of the following options: sd, hd, fhd, qhd, uhd. If, for instance, qhd is specified but not available, it will select the next available option in line, such as fhd.
Method Description
play() To play the video when it has been paused.
pause() To pause the video when it is playing.

Preview

🍪 Press 'Accept' to confirm that you accept we don't use cookies. Yes, this banner is just for show!
Accept