Vime.

Vime is simply a collection of web components that help you easily build your own media player. See the Features section below for some more highlights on what Vime provides.

🍭 They say a picture is worth a thousand words ...

<vime-player autoplay muted controls>
  <vime-video poster="/media/poster.png" cross-origin>
    <!-- Why `data-src`? Lazy loading. You can always use `src` if you don't need it. -->
    <source data-src="/media/video.mp4" type="video/mp4" />
    <track default kind="subtitles" src="/media/subs/en.vtt" srclang="en" label="English" />
    <track kind="subtitles" src="/media/subs/es.vtt" srclang="es" label="Spanish" />
  </vime-video>
</vime-player>

Custom UI?

<vime-player autoplay muted>
  <vime-youtube video-id="DyTCOwB0DVw" />

  <vime-ui>
    <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" />
    </vime-controls>
  </vime-ui>
</vime-player>

In a hurry?

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

  <vime-default-ui />
</vime-player>

Features

• 🖥  Responsive (mobile/desktop).
• 👌  Touch input friendly.
• 🎥  Multi-provider support (HTML5, HLS, YouTube, Vimeo etc.).
• ♾️  Avoid cross-browser differences on media related APIs such as fullscreen and picture-in-picture.
• 👐  Accessible via ARIA roles/states/properties and keyboard support.
• 🌎  I18N support.
• 🎨  Style anything you want with CSS variables.
• 🏎️  Performant with preconnections and lazy loading out of the box.
• ️🧰  Awesome default UI's for audio/video/live media on mobile and desktop.
• 🛠  Comprehensive player API.
• 💪  Built with TypeScript so you can enjoy completely typed components.
• 🏠  Feel right at home with HTML/CSS/JS thanks to web components.
• 🍽️  Serve it with your favourite framework whether it's React, Vue, Angular or whatever the cool kids on the block use today.

🖥️ 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

• Html5
• Hls
• Dash
• YouTube
• Vimeo
• Dailymotion

📖 Documentation

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

❓ Looking for V1 docs? -> https://v1.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.