Vime is a customizable, extensible, accessible and framework agnostic media player.
- 🎥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.
- 👐Accessibleto 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 withCSS variables.Defaultlightand darkthemes are included.
- 🏎️ Performant withpreconnections+lazy loadingof 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.
- 🛠 Comprehensiveplayer APIwith 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.
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 ourDemo.
<vm-playerautoplaymuted>
<vm-videoposter= "/media/poster.png"cross-origin>
<!-- Why `data-src`? Lazy loading. You can always use `src` if you don't need it. -->
<sourcedata-src= "/media/video.mp4"type= "video/mp4"/>
<track
default
kind= "subtitles"
src= "/media/subs/en.vtt"
srclang= "en"
label= "English"
/>
</vm-video>
<!-- Loads the default Vime UI. -->
<vm-default-ui/>
</vm-player>Native UI?
<!-- Here we are requesting to use the native controls. -->
<vm-playerautoplaymutedcontrols>
<vm-audiocross-origin>
<sourcedata-src= "/media/audio.mp3"type= "audio/mp3"/>
</vm-audio>
</vm-player>Custom UI?
<!-- Lets add a little splash of color throughout the player. -->
<vm-playerautoplaymutedstyle= "--vm-player-theme: #1873d3">
<!-- Loading a YouTube video. -->
<vm-youtubevideo-id= "DyTCOwB0DVw"/>
<vm-ui>
<vm-click-to-play/>
<vm-captions/>
<vm-poster/>
<vm-spinner/>
<vm-default-settings/>
<vm-controlspin= "bottomLeft"active-duration= "2750"full-width>
<!--
These are all predefined controls that you can easily customize. You could also build
your own controls completely from scratch.
-->
<vm-playback-controltooltip-direction= "right"/>
<vm-volume-control/>
<vm-time-progress/>
<vm-control-spacer/>
<vm-caption-control/>
<vm-pip-controlkeys= "p"/>
<vm-settings-control/>
<vm-fullscreen-controlkeys= "f"tooltip-direction= "left"/>
</vm-controls>
</vm-ui>
</vm-player>There are framework specific bindings for:
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 hereif your framework has complete support for web components.
There are alsoexamplesfor loading and using Vime with:
Vime is forward thinking and built for the modern web. All ES6 Compatiblebrowsers are supported, some of which are listed below.
- Edge 79+
- Firefox 68+
- Chrome 61+
- Safari 11+
- iOS Safari 11+
- Opera 48+
Documentation can be found athttps://vimejs.
Feel free to join ourDiscord channelif 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 theContributing Guide.
A huge thanks to our sponsors who support open-source projects like Vime.
