vm-ui

Simple container that holds a collection of user interface components.

The only important role this component really has is, avoiding overlapping custom UI with the native iOS media player UI. Therefore, custom UI is only displayed on iOS if the playsinline prop is true, and the player is not in fullscreen mode.

Usage

HTML

<vm-player>

<!-- ... -->

<vm-ui>

<!-- ... -->

</vm-ui>

</vm-player>

React

import React from 'react';

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

function Example() {

return (

<Player>

{/* ... */}

<Ui>{/* ... */}</Ui>

</Player>

);

}

Vue

example.vue

<template>

<Player>

<!-- ... -->

<Ui>

<!-- ... -->

</Ui>

</Player>

</template>

<script>

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

export default {

components: {

Player,

Ui,

},

};

</script>

Svelte

example.svelte

<Player>

<!-- ... -->

<Ui>

<!-- ... -->

</Ui>

</Player>

<script lang="ts">

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

</script>

Stencil

class Example {

render() {

return (

<vm-player>

{/* ... */}

<vm-ui>{/* ... */}</vm-ui>

</vm-player>

);

}

}

Angular

example.html

<vm-player>

<!-- ... -->

<vm-ui>

<!-- ... -->

</vm-ui>

</vm-player>

Slots

Slot	Description
	Used to pass in UI components for the player.

CSS Custom Properties

Name	Description
--vm-ui-z-index	The position in the root z-axis stack inside the player.

Dependencies

Used by

• vm-default-ui