vm-caption-control

A control for toggling the visibility of captions. This control is not displayed if there's no track currently set.

Visual

Usage

HTML

<vm-player>

<!-- ... -->

<vm-ui>

<!-- ... -->

<vm-controls>

<!-- ... -->

<vm-caption-control></vm-caption-control>

</vm-controls>

</vm-ui>

</vm-player>

React

import React from 'react';

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

function Example() {

return (

<Player>

{/* ... */}

<Ui>

{/* ... */}

<Controls>

<CaptionControl />

</Controls>

</Ui>

</Player>

);

}

Vue

example.vue

<template>

<Player>

<!-- ... -->

<Ui>

<!-- ... -->

<Controls>

<CaptionControl />

</Controls>

</Ui>

</Player>

</template>

<script>

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

export default {

components: {

Player,

Ui,

Controls,

CaptionControl,

},

};

</script>

Svelte

example.svelte

<Player>

<!-- ... -->

<Ui>

<!-- ... -->

<Controls>

<CaptionControl />

</Controls>

</Ui>

</Player>

<script lang="ts">

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

</script>

Stencil

class Example {

render() {

return (

<vm-player>

{/* ... */}

<vm-ui>

{/* ... */}

<vm-controls>

<vm-caption-control />

</vm-controls>

</vm-ui>

</vm-player>

);

}

}

Angular

example.html

<vm-player>

<!-- ... -->

<vm-ui>

<!-- ... -->

<vm-controls>

<!-- ... -->

<vm-caption-control></vm-caption-control>

</vm-controls>

</vm-ui>

</vm-player>

Properties

Property	Description	Type	Default
hideIcon	The URL to an SVG element or fragment to load.	string	'captions-off'
hideTooltip	Whether the tooltip should not be displayed.	boolean	false
icons	The name of an icon library to use. Defaults to the library defined by the icons player property.	string ∣ undefined	undefined
keys	A slash (/) separated string of JS keyboard keys (KeyboardEvent.key), that when caught in a keydown event, will trigger a click event on the control.	string ∣ undefined	'c'
showIcon	The URL to an SVG element or fragment to load.	string	'captions-on'
tooltipDirection	The direction in which the tooltip should grow.	"left" ∣ "right" ∣ undefined	undefined
tooltipPosition	Whether the tooltip is positioned above/below the control.	"bottom" ∣ "top"	'top'

Dependencies

Used by

• vm-default-controls

Depends on

• vm-control
• vm-icon
• vm-tooltip