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.
| Attribute | 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. |
| fallback | Defaults to placeholder, a player-like image that is used when a video can’t play due to e.g. low battery. You can set it to thumbnail when you want to use the custom thumbnail or initial frame as fallback. |
| Method | Description |
|---|---|
| play() | To play the video when it has been paused. |
| pause() | To pause the video when it is playing. |
| Property | Description |
|---|---|
| duration | Returns a Promise<number> which returns the duration of the clip (not the video as original) as float. |
| currentTime | Returns or set the currentTime of the video. |
