Show HN: Vime – build and customize your own media player on the web (OSS)



  • 🎥  Multi-supplier reinforce (HTML5, HLS, YouTube, Vimeo etc.).
  • 👑  One API to rule all of them! Don’t re-learn one thing else the following time you’ll desire a player.
  • ♾️  Steer particular of negative-browser variations on media connected APIs, equivalent to fullscreen and image-in-image.
  • 👐  Accessible to all via ARIA roles/states/properties and keyboard reinforce.
  • 🌎  I18N reinforce.
  • 🖥  Designed with both mobile and desktop in mind.
  • 👌  Contact enter gracious.
  • 🎨  Style one thing else you spend to own with CSS variables. Default gentle and
    darkish themes are included.
  • 🏎️  Performant with preconnections + idle loading of parts
    and media out of the field.
  • 🧩  Without shrink back glean your agree with parts and lengthen Vime.
  • 🗑️  Gentle-weight – ~25kB (gzip) standalone, and ~47kB with the default Vime UI.
  • 🧰  Good default custom UI’s for audio/video/live media.
  • 🛠  Comprehensive player API with a heap of properties, recommendations and events.
  • 💪  Constructed with TypeScript as a draw to additionally revel in fully typed parts.
  • 🏠  Feel neutral at home with HTML/CSS/JS thanks to web parts.
  • 🏗️  Framework explicit bindings for React, Vue, Svelte and Angular.

🍭 Examples

The examples below are the utilization of web parts however there are bindings for React, Vue, Angular and
Svelte. Whereas you spend to must stare how they learn test out our Demo.

<vime-player autoplay muted>
  <vime-video poster="/media/poster.png" cross-origin>
    <source data-src="/media/video.mp4" type="video/mp4" />

  <vime-default-ui />

Native UI?

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

Custom UI?

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

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

🏗️ Frameworks

There are framework explicit bindings for:

Hang, that at its core Vime is peaceful simply web parts. Despite the indisputable truth that your framework is
now not talked about within the list above, it presumably peaceful supports Vime natively. That it’s good to presumably additionally test
right here if your framework has total reinforce for
web parts.

There are also examples for loading and the utilization of Vime with:

🖥️ Browsers

Vime is forward pondering and constructed for the stylish web. All
ES6 Compatible browsers are supported, some of which could be
listed below.

  • Edge 79+
  • Firefox 68+
  • Chrome 61+
  • Safari 11+
  • iOS Safari 11+
  • Opera 48+

🎥 Suppliers

📖 Documentation

Documentation could additionally even be realized at

Looking to receive V1 docs? ->

🙋 Enhance

Feel free to join our Discord channel in show for you attend with one thing else connected to Vime.
Please be aware to be respectful and affected person as it is a community pushed project.

🔨 Contributing

Whereas you are searching out for to make contributions and attend in building a nearer media player for the glean, then all the pieces
you must open could additionally even be realized within the Contributing Recordsdata.

❤️ Sponsors

A sizable thanks to our sponsors who reinforce begin-source initiatives relish Vime.

zeit now


Read More

Leave A Reply

Your email address will not be published.