Player

Everything starts with the player component, which wraps all providers, plugins (coming soon) and UI components together. It's responsible for holding the state of the player such as whether to autoplay or show controls, and the state of media playback such as the current time or duration. This is the primary component you will interact with similar to the audio and video HTML5 elements, and for simple needs you wont need to go much further than this.

Let's setup the "shell" of the player so we can start laying out the rest of it:

HTML

player.html

<vm-player>

<!-- Provider component is placed here. -->

<vm-ui>

<!-- UI components are placed here. -->

</vm-ui>

</vm-player>

React

Player.tsx

import React from 'react';

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

function Player() {

return (

<Player>

{/* Provider component is placed here. */}

<Ui>{/* UI components are placed here. */}</Ui>

</Player>

);

}

Vue

Player.vue

<template>

<Player>

<!-- Provider component is placed here. -->

<Ui>

<!-- UI components are placed here. -->

</Ui>

</Player>

</template>

<script>

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

export default {

components: {

Player,

Ui,

},

};

</script>

Svelte

Player.svelte

<Player>

<!-- Provider component is placed here. -->

<Ui>

<!-- UI components are placed here. -->

</Ui>

</Player>

<script lang="ts">

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

</script>

Stencil

player.tsx

class Player {

// ...

render() {

return (

<vm-player>

{/* Provider component is placed here. */}

<vm-ui>{/* UI components are placed here. */}</vm-ui>

</vm-player>

);

}

}

Angular

player.html

<vm-player>

<!-- Provider component is placed here. -->

<vm-ui>

<!-- UI components are placed here. -->

</vm-ui>

</vm-player>

All the player properties, methods, events and CSS properties are listed and demonstrated in the player component API document, so feel free to dig through and see what power lays ahead. There are also simple examples setup on our GitHub so you can get a feel of the player quickly:

• HTML
• React
• Vue
• Angular
• Svelte
• Stencil

🚂  Let's move onto setting up our provider!