Vime is a customizable, extensible, accessible and framework agnostic media player

Overview
🎉  Vime is becoming Vidstack! Read more  🎉
Vime Logo

Vime is a customizable, extensible, accessible and framework agnostic media player.

package-badge license-badge semantic-release-badge Release docs-badge jsdelivr-badge discord-badge

Vime 2 - Video Player Screenshot

✨ Features

  • 🎥  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 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. Default light and dark themes are included.
  • 🏎️  Performant with preconnections + 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 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.

🍭 Examples

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.

">
<vm-player autoplay muted>
  <vm-video poster="/media/poster.png" cross-origin>
    
    <source data-src="/media/video.mp4" type="video/mp4" />
    <track
      default
      kind="subtitles"
      src="/media/subs/en.vtt"
      srclang="en"
      label="English"
    />
  vm-video>

  
  <vm-default-ui />
vm-player>

Native UI?

">

<vm-player autoplay muted controls>
  <vm-audio cross-origin>
    <source data-src="/media/audio.mp3" type="audio/mp3" />
  vm-audio>
vm-player>

Custom UI?

">

<vm-player autoplay muted style="--vm-player-theme: #1873d3">
  
  <vm-youtube video-id="DyTCOwB0DVw" />

  <vm-ui>
    <vm-click-to-play />
    <vm-captions />
    <vm-poster />
    <vm-spinner />
    <vm-default-settings />
    <vm-controls pin="bottomLeft" active-duration="2750" full-width>
      
      <vm-playback-control tooltip-direction="right" />
      <vm-volume-control />
      <vm-time-progress />
      <vm-control-spacer />
      <vm-caption-control />
      <vm-pip-control keys="p" />
      <vm-settings-control />
      <vm-fullscreen-control keys="f" tooltip-direction="left" />
    vm-controls>
  vm-ui>
vm-player>

🏗️ Frameworks

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 here if your framework has complete support for web components.

There are also examples for loading and using Vime with:

🖥️ Browsers

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+

🎥 Providers

📖 Documentation

Documentation can be found at https://vimejs.com.

🙋 Support

Feel free to join our Discord channel if you'd like help with anything related to Vime. Please remember to be respectful and patient as this is a community driven project.

🔨 Contributing

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.

❤️ Sponsors

A huge thanks to our sponsors who support open-source projects like Vime.

mux vercel cypress
Issues
  • SSR Support

    SSR Support

    Great project! Would love to see some support for SSR frameworks like Svelte's Sapper. At the moment I can't find a way to get the standard or complete versions to work, as importing them in Svelte causes crashes due to attempts to access document and window when they are still unavailable (when rendering server-side).

    The only thing that works right now is using @vime-js/lite imported from the @vime-js/standard installation. Interestingly, using lite when installed on its own does not work either.

    bug 
    opened by flergbarn 17
  • Not working with Angular 9

    Not working with Angular 9

    I'm using Angular V9.1.11, and i tried to use the latest version of vime but it gives an error as you can see below :

    Compiling @vime/angular : module as esm5 Warning: Invalid constructor parameter decorator in D:/Projects/My Project/My-Project/node_modules/@vime/angular/dist/fesm2015/vime-angular.js: () => [ { type: ChangeDetectorRef }, { type: ElementRef }, { type: NgZone } ] Error: Error on worker #1: Error: getInternalNameOfClass() called on a non-ES5 class: expected VimeAudio to have an inner class declaration at Esm5ReflectionHost.getInternalNameOfClass (D:\Projects\My Project\My-Project\[email protected]\compiler-cli\ngcc\src\host\esm5_host.js:88:23) at DelegatingReflectionHost.getInternalNameOfClass (D:\Projects\My Project\My-Project\[email protected]\compiler-cli\ngcc\src\host\delegating_host.js:89:34) at Object.extractDirectiveMetadata (D:\Projects\My Project\My-Project\[email protected]ar\compiler-cli\src\ngtsc\annotations\src\directive.js:237:69) at ComponentDecoratorHandler.analyze (D:\Projects\My Project\My-Project\[email protected]\compiler-cli\src\ngtsc\annotations\src\component.js:143:47) at NgccTraitCompiler.TraitCompiler.analyzeTrait (D:\Projects\My Project\My-Project\[email protected]\compiler-cli\src\ngtsc\transform\src\compilation.js:345:40) at analyze (D:\Projects\My Project\My-Project\[email protected]\compiler-cli\src\ngtsc\transform\src\compilation.js:297:58) at _loop_1 (D:\Projects\My Project\My-Project\[email protected]\compiler-cli\src\ngtsc\transform\src\compilation.js:319:21) at NgccTraitCompiler.TraitCompiler.analyzeClass (D:\Projects\My Project\My-Project\[email protected]\compiler-cli\src\ngtsc\transform\src\compilation.js:325:35) at NgccTraitCompiler.analyzeFile (D:\Projects\My Project\My-Project\[email protected]\compiler-cli\ngcc\src\analysis\ngcc_trait_compiler.js:47:26) at DecorationAnalyzer.analyzeProgram (D:\Projects\My Project\My-Project\[email protected]\compiler-cli\ngcc\src\analysis\decoration_analyzer.js:134:39) at ClusterMaster.onWorkerMessage (D:\Projects\My Project\My-Project\[email protected]\compiler-cli\ngcc\src\execution\cluster\master.js:194:27) at D:\Projects\My Project\My-Project\[email protected]\compiler-cli\ngcc\src\execution\cluster\master.js:54:95 at ClusterMaster. (D:\Projects\My Project\My-Project\[email protected]\compiler-cli\ngcc\src\execution\cluster\master.js:292:57) at step (D:\Projects\My Project\My-Project\node_modules\tslib\tslib.js:140:27) at Object.next (D:\Projects\My Project\My-Project\node_modules\tslib\tslib.js:121:57) at D:\Projects\My Project\My-Project\node_modules\tslib\tslib.js:114:75 at new Promise () at Object.__awaiter (D:\Projects\My Project\My-Project\node_modules\tslib\tslib.js:110:16) at EventEmitter. (D:\Projects\My Project\My-Project\[email protected]\compiler-cli\ngcc\src\execution\cluster\master.js:286:32) at EventEmitter.emit (events.js:314:20) An unhandled exception occurred: NGCC failed. See "C:\Users\saber\AppData\Local\Temp\ng-KmWmwL\angular-errors.log" for further details. npm ERR! code ELIFECYCLE npm ERR! syscall spawn npm ERR! file C:\Windows\system32\cmd.exe npm ERR! errno ENOENT npm ERR! [email protected] ng:serve: ng serve npm ERR! spawn ENOENT npm ERR! npm ERR! Failed at the [email protected] ng:serve script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\saber\AppData\Roaming\npm-cache_logs\2020-11-30T14_36_06_880Z-debug.log ERROR: "ng:serve" exited with 1. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] start: npm-run-all -p electron:serve ng:serve npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\saber\AppData\Roaming\npm-cache_logs\2020-11-30T14_36_06_999Z-debug.log

    I've tried version 4.2.2 just to see if things gonna work, but nothing

    bug package:angular 
    opened by MoroccanGeek 15
  • 🎙️ Vime 2.0

    🎙️ Vime 2.0

    Vime 2.0

    Introduction

    This "issue" is to layout my thoughts and plans for Vime 2 and for any community feedback. I'd love to hear from people who've actually tried Vime 1 and what they thought (especially what they hated), and what they'd love to see in a media player library.

    In all honesty it was my first-time building out a "larger" front-end library. I did it at first because I needed the player for another project and I wasn't happy with existing solutions by modern standards. That motivation slowly transformed into me loving the JS ecosystem and exploring it. I think as most do, I made a lot of mistakes and over-complicated the library on my "first attempt" (not counting few rewrites). Looking back on it now I just keep shaking my head haha. I plan to remedy those mistakes in the next release.

    Work will commence on the v2 branch.

    Goals

    1. Improved developer experience interacting with the library as a consumer and contributor.

    2. Maintain great end-user experience by focusing on: aesthetics, accessibility, i18n and UI responsiveness.

    3. Component/s API simplification and closer to native DOM implementation (Eg: Subscriptions -> Events).

    4. Maintain customization and configuration but in a much simpler form.

    5. Make the library easier to maintain.

    Plan

    Foundation

    I think one move that would actually hit all my goals is migrating from Svelte to Stencil. This will provide us with:

    • Easier maintenance. Project compilation/bundling out of the box, auto-gen docs, built-in TS support, lazy-loading, polyfilling etc.

    • Reusability/integrations. Web Components are a native DOM solution to building reusable components. It's widely supported today by browsers and frameworks. In addition, Stencil specifically has solutions/guides for integrating with frameworks.

    • TypeScript + JSX. There is no need to dig into the benefits TS brings to a collaborative workspace and shipping a package/library because it's been written about a million times. My personal experience on a few projects confirms it. Also TS + JSX work seamlessly together in contrast to SFCs or native HTML.

    • Testing. Unit + E2E testing solution built-in.

    • Dev server with hot reloading. Comes with an integrated dev server in order to simplify development.

    To elaborate a little more ... Svelte is built to be general purpose. It's not aimed specifically at building applications (Sapper aims to solve this part), nor libraries. It's easy to adopt/learn and just get shit done with. These are all reasons to absolutely love it but it also means it's not made for all use cases. It doesn't cover the tedious elements of maintaining a library of which some are mentioned above. TypeScript support is also poor and probably always will be because of the nature of the library + SFCs, similarly to how it feels hacky or unnatural in Vue.

    I really really enjoyed Svelte but in a simple trade-off I have to let it go for now :( But ... it's not all bad news! Lucky for us Svelte has complete web component support!

    Browsers

    The following browsers will be supported:

    • IE 11
    • Safari
    • Mobile Safari
    • Firefox
    • Chrome
    • Opera
    • Edge

    Existing Packages

    I think all the separate packages, names and features in Vime 1 are confusing. All existing packages will be merged into a single package called @vime/core.

    • @vime-js/preview will be axed. For the general consumer of this library, this component seems unnecessary and it can be easily achieved without our help.

    • ~@vime-js/lite will become provider specific versions such as the vime-lite-youtube component exported from the @vime/core package.~ @vime-js/lite will be axed to simplify the library and because the effort-reward ratio was too little. It was only going to shave off at most 5-10 kB off the full version and provide a super bare bones API that was probably going to suck.

    • @vime-js/standard and @vime-js/complete will be merged to become the vime-player component exported from the @vime/core package.

    • @vime-js/core and @vime-js/utils will now live inside the @vime/core package.

    Core API

    The core API will be available on the root media player component vime-player which is exported from @vime/core and it will reside in packages/core.

    • The API will closely match the HTMLMediaElement API.

    • The core design will prefer passing additional complex props via child components.

    The following props will also be included:

    • isFullscreenActive
    • isPiPActive
    • canAutoplay
    • canMutedAutoplay
    • aspectRatio
    • canSetFullscreen
    • hasPlaybackStarted
    • hasPlaybackEnded
    • mediaType
    • isAudio, isVideo and isLive

    The following methods will also be included:

    • canSetPiP, requestPiP and exitPiP
    • requestFullscreen and exitFullscreen

    Example

    <vime-player>
     <!-- ... --->
    </vime-player>
    

    Providers

    All providers will follow the convention vime-provider-x (vime-provider-youtube) ~for the core provider and vime-lite-x (vime-lite-youtube) for an embed~. They will be exported from @vime/core and reside in packages/core.

    • Providers will be implement the MediaProvider interface.
    • They are responsible for actually rendering the media and controlling playback.
    • Unlike Vime 1, normalization will occur in each provider instead of attempting to normalize the differences globally. This caused a lot of headaches in Vime 1 and was very easy to break.
    • ~The lite version of a provider is only available for embedded media and it should extend the Embed component and implement the MediaLiteProvider interface.~
    • ~Embedded media should always attempt to extend the lite version of the provider.~

    A more detailed specification should exist in the future for the provider interface.

    Examples

    <vime-player>
      <vime-provider-youtube videoId="1y2xOj4QN6Q" />
    </vime-player>
    

    Plugins

    All plugins will follow the convention vime-plugin-x (vime-plugin-localstorage). They will be exported from @vime/core and reside in packages/core.

    • The registry will be simplified and have a well-defined lifecycle. Something simple like mount -> register -> attach -> detach -> deregister -> unmount.
    • Plugins will implement the Plugin interface.
    • They will not include any visuals and simply extend the functionality of the player. For example a vime-plugin-chromecast plugin might add a cast method to the root media player.

    Example

    <vime-player>
      <vime-plugin-chromecast />
    </vime-player>
    

    UI Customization

    All UI components will follow the convention vime-x (vime-controls). They will be exported from @vime/core and reside in packages/core.

    Example

    <vime-player>
      <!-- ... -->
    
      <vime-controls>
         <vime-control icon="play.svg" />
      </vime-controls>
    </vime-player>
    

    Integrations

    Seperate packages for each integration will be exported from @vime/x (@vime/react) and reside in packages/x (packages/react).

    Vime 2 will aim to support the following environments with the help of Stencil:

    • JavaScript
    • Svelte
    • Preact
    • React
    • Vue
    • Stencil
    • Angular
    • Ember

    Testing

    All components will be tested. E2E tests will be preferred over unit tests but we'll see. I'm interested in creating a test harness to ensure all providers follow a strict flow of events when playing media, seeking etc.

    Site

    • The playground will be removed in Vime 2.
    • Introduction and Getting Started documentation pages will be removed.
    • The documentation will move from GitBook to most likely Docusaurus.
    • The home page of the site will contain code snippets with feature previews.
    • Thanks to Stencil all the API documentation will be auto-generated for all components. We can focus on writing up any necessary guides such as a quickstart, creating your own controls, creating a provider, creating a plugin, integration guides and so on.
    • Comparisons and reviews of Plyr and Video.js will be removed.

    References

    • #16
    • #5
    • #42
    • #46
    • #47
    • #48
    • #23
    • #56
    wip 
    opened by mihar-22 15
  • Fullscreen not working properly

    Fullscreen not working properly

    Issue: When i entering fullscreen for the first time it's working properly, but if i want to exit from fullscreen i got "Uncaught (in promise) Error: Fullscreen API is not available."

    Versions: Vime: 5.0.19

    Provider: HLS

    bug package:core 
    opened by Draco241 14
  • Looking for Documentation on Implementation

    Looking for Documentation on Implementation

    Hi.

    Sorry for the support request here, but I'm having trouble finding HTML examples using vime.js and where vime.js files can be loaded from using