components

Player component

The player component serves as the core for all other components. It ensures that your video is rendered with optimal speed, smoothness, and visual appeal, tailored to your desired display preferences, utilizing the full potential of mave. Simply inform us of your requirements, and we will handle all the complex technical aspects for you, including adaptive bitrate (e.g. HLS), codecs, analytics, and player settings. It will also contain its aspect-ratio.

If you want to incorporate video into your UI instead of using a player, see <mave-clip />

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

Preview

Properties

There are two approaches to configuring player settings. One method involves manually adding properties, and below you will find a comprehensive list of available properties. Any changes made in the manage section will also be saved as the default settings for your player. This means you have the option to override these defaults by providing specific properties, or you can leave them blank and fine-tune the settings through the user-friendly settings panel.

Property Description
embed (required) This points to a specific embed.
aspect-ratio Defaults to 16/9, but you can define any aspect ratio.
width Instead of an aspect ratio, you can provide width and height in pixels.
height Instead of an aspect ratio, you can provide width and height in pixels.
autoplay Defaults to false, but you can provide always or lazy (only plays when in view).
controls Defaults to full, but can be big or none (shows no interface).
color Defaults to transparent, but providing a hex color you can change the controls color.
opacity When providing a color you can provide its opacity too.
loop Defaults false, but when provide loop (doesn’t require an attribute).
subtitles Defaults to none, you can give a list of languages, e.g.: "en, nl".
theme Read more about themes in the docs.
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.

Methods

Although we do a lot of heavy lifting, the <mave-player /> component acts similarly to <video /> component. This means .play() and .pause() can be used in Javascript for instance. You can also attach event listeners to the player, which fires all video events, like: timeupdate.

Method/property Description
play() To play the video when it has been paused.
pause() To pause the video when it is playing.
muted To mute or unmute the video (boolean).
paused Getter to know if the video is playing, returns a boolean.
currentTime Returns the current time of the video.

Slots

Because we’re using native webcomponents, we can use slots to render your html inside the player. This means you can add your own buttons or other things to be rendered at specific times and/or spots. See our blogpost for an example.

Method Description
end-screen Is shown every time the video ended.
start-screen Is only shown once, before video is playing.

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