vime-default-settings

Creates a settings menu with options for changing the 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

<vime-player>

<!-- ... -->

<vime-ui>

<!-- ... -->

<vime-default-settings></vime-default-settings>

</vime-ui>

</vime-player>

React

import React from 'react';

import { VimePlayer, VimeUi, VimeDefaultSettings } from '@vime/react';

function Example() {

return (

<VimePlayer>

{/* ... */}

<VimeUi>

{/* ... */}

<VimeDefaultSettings />

</VimeUi>

</VimePlayer>

);

}

Vue

example.vue

<template>

<VimePlayer>

<!-- ... -->

<VimeUi>

<!-- ... -->

<VimeDefaultSettings />

</VimeUi>

</VimePlayer>

</template>

<script>

import { VimePlayer, VimeUi, VimeDefaultSettings } from '@vime/vue';

export default {

components: {

VimePlayer,

VimeUi,

VimeDefaultSettings,

},

};

</script>

Svelte

example.svelte

<VimePlayer>

<!-- ... -->

<VimeUi>

<!-- ... -->

<VimeDefaultSettings />

</VimeUi>

</VimePlayer>

<script lang="ts">

import { VimePlayer, VimeUi, VimeDefaultSettings } from '@vime/svelte';

</script>

Stencil

class Example {

render() {

return (

<vime-player>

{/* ... */}

<vime-ui>

{/* ... */}

<vime-default-settings />

</vime-ui>

</vime-player>

);

}

}

Angular

example.html

<vime-player>

<!-- ... -->

<vime-ui>

<!-- ... -->

<vime-default-settings></vime-default-settings>

</vime-ui>

</vime-player>

Properties

Property	Attribute	Description	Type	Default
pin	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 vime-submenu or vime-menu-item).

Dependencies

Used by

• vime-default-ui

Depends on

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

Graph

graph TD;

vime-default-settings --> vime-menu-item

vime-default-settings --> vime-menu-radio

vime-default-settings --> vime-submenu

vime-default-settings --> vime-menu-radio-group

vime-default-settings --> vime-settings

vime-menu-item --> vime-icon

vime-menu-radio --> vime-menu-item

vime-submenu --> vime-menu-item

vime-submenu --> vime-menu

vime-settings --> vime-menu

vime-default-ui --> vime-default-settings

style vime-default-settings fill:#f9f,stroke:#333,stroke-width:4px

---

Built with StencilJS