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 />

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

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

Preview

Attributes

There are two approaches to configuring player settings. One method involves manually adding attributes, and below you will find a comprehensive list of available attributes. 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 attributes, or you can leave them blank and fine-tune the settings through the user-friendly settings panel.

Attribute	Description
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).

There are also a couple of attributes that can only be set on the component and not through out manage interface:

Attribute	Description
embed (required)	This points to a specific embed.
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.
restart()	To restart the video from the beginning.
pause()	To pause the video when it is playing.
muted	To mute or unmute the video (boolean).
paused	Returns a boolean to know if the video is playing.
currentTime	Returns or set the currentTime of the video.
duration	Returns a `Promise<number>` which returns the duration of the video as float.

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`.