vm-default-settings

Creates a settings menu with options for changing the audio track, playback rate, quality and captions of the current media. This component is provider aware. For example, it will only show options for changing the playback rate if the current provider allows changing it (player.canSetPlaybackRate()). In addition, you can extend the settings with more options via the default slot.

Visual

Usage

HTML

<vm-player>

<!-- ... -->

<vm-ui>

<!-- ... -->

<vm-default-settings></vm-default-settings>

</vm-ui>

</vm-player>

React

import React from 'react';

import { Player, Ui, DefaultSettings } from '@vime/react';

function Example() {

return (

<Player>

{/* ... */}

<Ui>

{/* ... */}

<DefaultSettings />

</Ui>

</Player>

);

}

Vue

example.vue

<template>

<Player>

<!-- ... -->

<Ui>

<!-- ... -->

<DefaultSettings />

</Ui>

</Player>

</template>

<script>

import { Player, Ui, DefaultSettings } from '@vime/vue';

export default {

components: {

Player,

Ui,

DefaultSettings,

},

};

</script>

Svelte

example.svelte

<Player>

<!-- ... -->

<Ui>

<!-- ... -->

<DefaultSettings />

</Ui>

</Player>

<script lang="ts">

import { Player, Ui, DefaultSettings } from '@vime/svelte';

</script>

Stencil

class Example {

render() {

return (

<vm-player>

{/* ... */}

<vm-ui>

{/* ... */}

<vm-default-settings />

</vm-ui>

</vm-player>

);

}

}

Angular

example.html

<vm-player>

<!-- ... -->

<vm-ui>

<!-- ... -->

<vm-default-settings></vm-default-settings>

</vm-ui>

</vm-player>

Properties

Property	Description	Type	Default
pin	Pins the settings to the defined position inside the video player. This has no effect when the view is of type audio, it will always be bottomRight.	"bottomLeft" ∣ "bottomRight" ∣ "topLeft" ∣ "topRight"	'bottomRight'

Slots

Slot	Description
	Used to extend the settings with additional menu options (see vm-submenu or vm-menu-item).

Dependencies

Used by

• vm-default-ui

Depends on

• vm-menu-item
• vm-submenu
• vm-menu-radio-group
• vm-menu-radio
• vm-settings