<div align="center"> π Vime is merging into Vidstack! <a target="_blank" rel="noopener noreferrer" href="https://github.com/vime-js/vime/issues/280">Read more</a> π </div>
npm install @javieracrich/vimeVime is a customizable, extensible, accessible and framework agnostic media player.
[![package-badge]][package]
[![license-badge]][license]
[![semantic-release-badge]][semantic-release]
![Release][release-badge]
[![docs-badge]][docs]
[![jsdelivr-badge]][jsdelivr]
[![discord-badge]][discord]
src="https://raw.githubusercontent.com/vime-js/vime/master/static/player/video.png"
alt="Vime 2 - Video Player Screenshot"
/>
- π₯ Multi-provider support (HTML5, HLS, YouTube, Vimeo etc.).
- π One API to rule them all! Don't re-learn anything the next time you need a player.
- βΎοΈ Avoid cross-browser differences on media related APIs, such as fullscreen and picture-in-picture.
- π [Accessible][accessibility] to all via ARIA roles/states/properties and keyboard support.
- π I18N support.
- π₯ Designed with both mobile and desktop in mind.
- π Touch input friendly.
- π¨ Style anything you want with [CSS variables][css-vars]. Default [light][light-theme] and
[dark][dark-theme] themes are included.
- ποΈ Performant with [preconnections][preconnections] + [lazy loading][lazy-loading] of components
and media out of the box.
- π§© Easily build your own components and extend Vime.
- ποΈ Lightweight - ~25kB (gzip) standalone, and ~47kB with the default Vime UI.
- οΈπ§° Awesome default custom UI's for audio/video/live media.
- π Comprehensive [player API][player-api] with a heap of properties, methods and events.
- πͺ Built with TypeScript so you can enjoy completely typed components.
- π Feel right at home with HTML/CSS/JS thanks to web components.
- ποΈ Framework specific bindings for React, Vue, Svelte, Stencil and Angular.
[web-components]: https://developer.mozilla.org/en-US/docs/Web/Web_Components
[accessibility]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
[css-vars]: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
[light-theme]: https://github.com/vime-js/vime/blob/master/src/themes/light.css
[dark-theme]: https://github.com/vime-js/vime/blob/master/src/themes/default.css
[player-api]: https://vimejs.com/components/core/player
[preconnections]: https://css-tricks.com/using-relpreconnect-to-establish-network-connections-early-and-increase-performance
[lazy-loading]: https://www.imperva.com/learn/performance/lazy-loading
**The examples below are using web components but there are bindings for React, Vue, Svelte, Stencil
and Angular. If you want to see how they look check out our Demo.**
``html
default
kind="subtitles"
src="/media/subs/en.vtt"
srclang="en"
label="English"
/>
`
_Native UI?_
`html`
_Custom UI?_
`html
``
There are framework specific bindings for:
- React
- Vue
- Svelte
- Stencil
- Angular
Keep in mind, that at its core Vime is still simply web components. Even if your framework is
not mentioned in the list above, it most likely still supports Vime natively. You can check
here if your framework has complete support for
web components.
There are also examples for loading and using Vime with:
- HTML
- Rollup
- Webpack
- React
- Vue 2
- Vue 3
- Svelte
- Stencil
- Angular
Vime is forward thinking and built for the modern web. All
ES6 Compatible browsers are supported, some of which are
listed below.
- Edge 79+
- Firefox 68+
- Chrome 61+
- Safari 11+
- iOS Safari 11+
- Opera 48+
- [HTML5][provider-file]
- [HLS][provider-hls]
- [Dash][provider-dash]
- [YouTube][provider-youtube]
- [Vimeo][provider-vimeo]
- [Dailymotion][provider-dailymotion]
[provider-hls]: https://vimejs.com/components/providers/hls
[provider-dash]: https://vimejs.com/components/providers/dash
[provider-file]: https://vimejs.com/components/providers/file
[provider-youtube]: https://vimejs.com/components/providers/youtube
[provider-vimeo]: https://vimejs.com/components/providers/vimeo
[provider-dailymotion]: https://vimejs.com/components/providers/dailymotion
Documentation can be found at https://vimejs.com.
Feel free to join our [Discord channel][discord] if you'd like help with anything related to Vime.
Please remember to be respectful and patient as this is a community driven project.
If you'd like to contribute and help in building a better media player for the web, then everything
you need to get started can be found in the Contributing Guide.
A huge thanks to our sponsors who support open-source projects like Vime.
width="100%"
alt="mux"
src="./static/sponsors/mux.png"
/>
width="100%"
alt="vercel"
src="./static/sponsors/vercel.png"
/>
width="100%"
alt="cypress"
src="./static/sponsors/cypress.png"
/>
[package]: https://www.npmjs.com/package/@vime/core
[package-badge]: https://img.shields.io/npm/v/@vime/core
[license]: https://github.com/vime-js/vime/blob/master/LICENSE
[license-badge]: https://img.shields.io/github/license/vime-js/vime?color=blue
[docs]: https://vimejs.com
[docs-badge]: https://img.shields.io/badge/docs-https://vimejs.com-green
[semantic-release]: https://github.com/semantic-release/semantic-release
[semantic-release-badge]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
[jsdelivr]: https://www.jsdelivr.com/package/npm/@vime/core
[jsdelivr-badge]: https://data.jsdelivr.com/v1/package/npm/@vime/core/badge?style=rounded
[release-badge]: https://github.com/vime-js/vime/workflows/Release/badge.svg?branch=master
[discord]: https://discord.com/invite/7RGU7wvsu9
[discord-badge]: https://img.shields.io/badge/chat-on%20discord-7389D8