repository·main·Indexed 25 days ago
https://github.com/vime-js/vimeA customizable, extensible, and framework-agnostic media player built with web components. Vime provides a unified API for media providers like YouTube, Vimeo, and HLS. It includes a core set of web components via @vime/core and official bindings for Angular (@vime/angular), React (@vime/react), Svelte (@vime/svelte), Vue 2 (@vime/vue), and Vue 3 (@vime/vue-next).
@vime/vue-next package provides Vue 3 bindings for the Vime media player. These bindings wrap around the web components defined in @vime/core and are auto-generated using Stencil. Use this package when building media player interfaces specifically for Vue 3 environments.@vime/svelte package provides Svelte bindings for Vime's web components. It wraps the core functionality found in @vime/core to provide a seamless Svelte developer experience. These bindings are auto-generated using Stencil.@vime/angular package provides Angular bindings that wrap around the Vime web components found in @vime/core. These bindings are auto-generated by Stencil and allow you to use Vime's customizable, extensible, and accessible media player within an Angular environment.@vime/vue package provides Vue 2 bindings for Vime's web components. It wraps around the @vime/core engine to provide a seamless integration experience within Vue 2 applications. These bindings are auto-generated using Stencil.@vime/react package provides React bindings for the Vime media player. These bindings wrap around the web components defined in @vime/core and are auto-generated using Stencil. Use this package when you want to integrate Vime's customizable, extensible, and accessible media player into a React project.Providers are responsible for loading media and controlling it (e.g., the YouTube provider manages the YouTube player embed).
Providers interact with the player via the MediaProviderAdapter interface. When player properties change (e.g., player.currentTime = 50), the player automatically calls the corresponding provider method (e.g., provider.setCurrentTime(50)) on the next render cycle.
To prevent infinite update loops, providers emit a special vmProviderChange event when the player needs to update its state, whereas all other components use the vmStateChange event.
Instead of using the DefaultUi, you can build a fully custom interface by placing individual Vime UI components inside a <Ui /> (or <vm-ui>) element. This allows you to mix predefined components with your own custom web components or framework components.
Commonly used Vime UI components include:
ClickToPlay / <vm-click-to-play>Spinner / <vm-spinner>Poster / <vm-poster>Example of a custom React implementation:
import React from 'react';
import { Player, Video, Ui, ClickToPlay, Spinner, Poster } from '@vime/react';
import TapSidesToSeek from './TapSidesToSeek';
function Player() {
return (
<Player>
<Video
crossOrigin=""
poster="https://files.vidstack.io/agent-327/poster.png"
>
<source
data-src="https://files.vidstack.io/agent-327/720p.mp4"
type="video/mp4"
/>
</Video>
<Ui>
<ClickToPlay />
<Spinner />
<Poster />
<TapSidesToSeek />
</Ui>
</Player>
);
}You can use Vime as raw web components via CDN, or use the @vime/svelte bindings for typed, documented components and additional helpers.
<head>:<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@vime/core@^5/themes/default.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@vime/core@^5/themes/light.css" />npm i @vime/core @vime/svelteTo add to the existing settings (like playback rate, quality, and captions) instead of replacing them, use the DefaultSettings component. You must first disable the default settings in the DefaultUi component using the noSettings (or no-settings) property to prevent duplication, then provide your own DefaultSettings instance.
Common properties for DefaultSettings include pin (e.g., pin="bottomRight").
// React Example
<DefaultUi noSettings>
<DefaultSettings pin="bottomRight">
{/* Extend the default settings with new options here. */}
</DefaultSettings>
</DefaultUi>To run the local Webpack demonstration project, clone the repository, navigate to the webpack example directory, install dependencies, and start the development server.
$: git clone https://github.com/vime-js/vime --depth=1
$: cd vime/examples/webpack
$: npm install
$: npm run devTo use a custom icon library in a Vime player within an Angular application, follow these steps:
icons property on the <vm-player> component to the name of your library (e.g., material).<vm-player>, add a <vm-ui> component.<vm-ui>, use the <vm-icon-library> component to register your custom library.name for your library and bind a [resolver] function to handle icon resolution.The resolver function should accept an iconName: string and return the path to the icon file (e.g., an SVG URL).
<!-- Set the icons property to the name of the library you'd like to use. -->
<vm-player icons="material">
<!-- ... -->
<vm-ui>
<!-- Register a custom icon library. -->
<vm-icon-library
name="my-library"
[resolver="customResolver"
></vm-icon-library>
</vm-ui>
</vm-player>class Example {
customResolver = (iconName: string) => `/icons/${iconName}.svg`;
}