{"id":13469692,"url":"https://github.com/vime-js/vime","last_synced_at":"2025-05-12T15:25:54.835Z","repository":{"id":38202686,"uuid":"240676936","full_name":"vime-js/vime","owner":"vime-js","description":"Customizable, extensible, accessible and framework agnostic media player. Modern alternative to Video.js and Plyr. Supports HTML5, HLS, Dash, YouTube, Vimeo, Dailymotion...","archived":false,"fork":false,"pushed_at":"2024-11-17T10:34:11.000Z","size":27788,"stargazers_count":2809,"open_issues_count":170,"forks_count":152,"subscribers_count":23,"default_branch":"main","last_synced_at":"2025-05-12T04:01:49.326Z","etag":null,"topics":["angular","audio","dailymotion","dash","embed","hls","html5","javascript","media","player","react","stenciljs","svelte","video","vime","vimeo","vue","web-components","youtube"],"latest_commit_sha":null,"homepage":"https://vimejs.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vime-js.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-02-15T09:26:48.000Z","updated_at":"2025-05-11T15:17:04.000Z","dependencies_parsed_at":"2024-05-03T11:14:17.872Z","dependency_job_id":"4e7fbf16-3205-4f49-8253-209a10fce81e","html_url":"https://github.com/vime-js/vime","commit_stats":{"total_commits":769,"total_committers":25,"mean_commits":30.76,"dds":0.3042912873862159,"last_synced_commit":"c1f311950c52b5c49329873a6bb9739f3727223f"},"previous_names":[],"tags_count":84,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vime-js%2Fvime","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vime-js%2Fvime/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vime-js%2Fvime/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vime-js%2Fvime/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vime-js","download_url":"https://codeload.github.com/vime-js/vime/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253764657,"owners_count":21960603,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","audio","dailymotion","dash","embed","hls","html5","javascript","media","player","react","stenciljs","svelte","video","vime","vimeo","vue","web-components","youtube"],"created_at":"2024-07-31T15:01:51.105Z","updated_at":"2025-05-12T15:25:54.807Z","avatar_url":"https://github.com/vime-js.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Real World","HarmonyOS","audio"],"sub_categories":["Components","Windows Manager"],"readme":"\u003cdiv align=\"center\"\u003e\n⚠️ \u0026nbsp;Vime will be deprecated soon! \u003ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://github.com/vime-js/vime/issues/376\"\u003eRead more\u003c/a\u003e\u0026nbsp;⚠️\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\u003cimg\n  width=\"150\"\n  src=\"https://raw.githubusercontent.com/vime-js/vime/master/static/identity/vime.png\"\n  alt=\"Vime Logo\"\n/\u003e\n\nVime is a customizable, extensible, accessible and framework agnostic media player.\n\n[![package-badge]][package]\n[![license-badge]][license]\n[![semantic-release-badge]][semantic-release]\n![Release][release-badge]\n[![docs-badge]][docs]\n[![jsdelivr-badge]][jsdelivr]\n[![discord-badge]][discord]\n\n\u003cimg\n  src=\"https://raw.githubusercontent.com/vime-js/vime/master/static/player/video.png\"\n  alt=\"Vime 2 - Video Player Screenshot\"\n/\u003e\n\n\u003c/div\u003e\n\n## ✨ Features\n\n- 🎥 \u0026nbsp;[Multi-provider support](#-providers) (HTML5, HLS, YouTube, Vimeo etc.).\n- 👑 \u0026nbsp;One API to rule them all! Don't re-learn anything the next time you need a player.\n- ♾️ \u0026nbsp;Avoid cross-browser differences on media related APIs, such as fullscreen and picture-in-picture.\n- 👐 \u0026nbsp;[Accessible][accessibility] to all via ARIA roles/states/properties and keyboard support.\n- 🌎 \u0026nbsp;I18N support.\n- 🖥 \u0026nbsp;Designed with both mobile and desktop in mind.\n- 👌 \u0026nbsp;Touch input friendly.\n- 🎨 \u0026nbsp;Style anything you want with [CSS variables][css-vars]. Default [light][light-theme] and\n  [dark][dark-theme] themes are included.\n- 🏎️ \u0026nbsp;Performant with [preconnections][preconnections] + [lazy loading][lazy-loading] of components\n  and media out of the box.\n- 🧩 \u0026nbsp;Easily build your own components and extend Vime.\n- 🗑️ \u0026nbsp;Lightweight - ~25kB (gzip) standalone, and ~47kB with the default Vime UI.\n- ️🧰 \u0026nbsp;Awesome default custom UI's for audio/video/live media.\n- 🛠 \u0026nbsp;Comprehensive [player API][player-api] with a heap of properties, methods and events.\n- 💪 \u0026nbsp;Built with TypeScript so you can enjoy completely typed components.\n- 🏠 \u0026nbsp;Feel right at home with HTML/CSS/JS thanks to web components.\n- 🏗️ \u0026nbsp;Framework specific bindings for React, Vue, Svelte, Stencil and Angular.\n\n[web-components]: https://developer.mozilla.org/en-US/docs/Web/Web_Components\n[accessibility]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA\n[css-vars]: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties\n[light-theme]: https://github.com/vime-js/vime/blob/master/src/themes/light.css\n[dark-theme]: https://github.com/vime-js/vime/blob/master/src/themes/default.css\n[player-api]: https://vimejs.com/components/core/player\n[preconnections]: https://css-tricks.com/using-relpreconnect-to-establish-network-connections-early-and-increase-performance\n[lazy-loading]: https://www.imperva.com/learn/performance/lazy-loading\n\n## 🍭 Examples\n\n**The examples below are using web components but there are bindings for React, Vue, Svelte, Stencil\nand Angular. If you want to see how they look check out our [Demo](https://vimejs.com/demo).**\n\n```html\n\u003cvm-player autoplay muted\u003e\n  \u003cvm-video poster=\"/media/poster.png\" cross-origin\u003e\n    \u003c!-- Why `data-src`? Lazy loading. You can always use `src` if you don't need it. --\u003e\n    \u003csource data-src=\"/media/video.mp4\" type=\"video/mp4\" /\u003e\n    \u003ctrack\n      default\n      kind=\"subtitles\"\n      src=\"/media/subs/en.vtt\"\n      srclang=\"en\"\n      label=\"English\"\n    /\u003e\n  \u003c/vm-video\u003e\n\n  \u003c!-- Loads the default Vime UI. --\u003e\n  \u003cvm-default-ui /\u003e\n\u003c/vm-player\u003e\n```\n\n_Native UI?_\n\n```html\n\u003c!-- Here we are requesting to use the native controls. --\u003e\n\u003cvm-player autoplay muted controls\u003e\n  \u003cvm-audio cross-origin\u003e\n    \u003csource data-src=\"/media/audio.mp3\" type=\"audio/mp3\" /\u003e\n  \u003c/vm-audio\u003e\n\u003c/vm-player\u003e\n```\n\n_Custom UI?_\n\n```html\n\u003c!-- Lets add a little splash of color throughout the player. --\u003e\n\u003cvm-player autoplay muted style=\"--vm-player-theme: #1873d3\"\u003e\n  \u003c!-- Loading a YouTube video. --\u003e\n  \u003cvm-youtube video-id=\"DyTCOwB0DVw\" /\u003e\n\n  \u003cvm-ui\u003e\n    \u003cvm-click-to-play /\u003e\n    \u003cvm-captions /\u003e\n    \u003cvm-poster /\u003e\n    \u003cvm-spinner /\u003e\n    \u003cvm-default-settings /\u003e\n    \u003cvm-controls pin=\"bottomLeft\" active-duration=\"2750\" full-width\u003e\n      \u003c!-- \n        These are all predefined controls that you can easily customize. You could also build \n        your own controls completely from scratch.\n      --\u003e\n      \u003cvm-playback-control tooltip-direction=\"right\" /\u003e\n      \u003cvm-volume-control /\u003e\n      \u003cvm-time-progress /\u003e\n      \u003cvm-control-spacer /\u003e\n      \u003cvm-caption-control /\u003e\n      \u003cvm-pip-control keys=\"p\" /\u003e\n      \u003cvm-settings-control /\u003e\n      \u003cvm-fullscreen-control keys=\"f\" tooltip-direction=\"left\" /\u003e\n    \u003c/vm-controls\u003e\n  \u003c/vm-ui\u003e\n\u003c/vm-player\u003e\n```\n\n## 🏗️ Frameworks\n\nThere are framework specific bindings for:\n\n- [React](https://vimejs.com/getting-started/installation#react)\n- [Vue](https://vimejs.com/getting-started/installation#vue)\n- [Svelte](https://vimejs.com/getting-started/installation#svelte)\n- [Stencil](https://vimejs.com/getting-started/installation#stencil)\n- [Angular](https://vimejs.com/getting-started/installation#angular)\n\nKeep in mind, that at its core Vime is still simply web components. Even if your framework is\nnot mentioned in the list above, it most likely still supports Vime natively. You can check\n[here](https://custom-elements-everywhere.com/) if your framework has complete support for\nweb components.\n\nThere are also [examples](./examples) for loading and using Vime with:\n\n- [HTML](./examples/html)\n- [Rollup](./examples/rollup)\n- [Webpack](./examples/webpack)\n- [React](./examples/react)\n- [Vue 2](./examples/vue)\n- [Vue 3](./examples/vue-next)\n- [Svelte](./examples/svelte)\n- [Stencil](./examples/stencil)\n- [Angular](./examples/angular)\n\n## 🖥️ Browsers\n\nVime is forward thinking and built for the modern web. All\n[ES6 Compatible](https://caniuse.com/#feat=es6-module) browsers are supported, some of which are\nlisted below.\n\n- Edge 79+\n- Firefox 68+\n- Chrome 61+\n- Safari 11+\n- iOS Safari 11+\n- Opera 48+\n\n## 🎥 Providers\n\n- [HTML5][provider-file]\n- [HLS][provider-hls]\n- [Dash][provider-dash]\n- [YouTube][provider-youtube]\n- [Vimeo][provider-vimeo]\n- [Dailymotion][provider-dailymotion]\n\n[provider-hls]: https://vimejs.com/components/providers/hls\n[provider-dash]: https://vimejs.com/components/providers/dash\n[provider-file]: https://vimejs.com/components/providers/file\n[provider-youtube]: https://vimejs.com/components/providers/youtube\n[provider-vimeo]: https://vimejs.com/components/providers/vimeo\n[provider-dailymotion]: https://vimejs.com/components/providers/dailymotion\n\n## 📖 Documentation\n\nDocumentation can be found at [https://vimejs.com](https://vimejs.com).\n\n## 🙋 Support\n\nFeel free to join our [Discord channel][discord] if you'd like help with anything related to Vime.\nPlease remember to be respectful and patient as this is a community driven project.\n\n## 🔨 Contributing\n\nIf you'd like to contribute and help in building a better media player for the web, then everything\nyou need to get started can be found in the [Contributing Guide](./.github/CONTRIBUTING.md).\n\n## ❤️ Sponsors\n\nA huge thanks to our sponsors who support open-source projects like Vime.\n\n\u003ca href=\"https://mux.com\"\u003e\n  \u003cimg\n    width=\"100%\"\n    alt=\"mux\"\n    src=\"./static/sponsors/mux.png\"\n  /\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://vercel.com\"\u003e\n  \u003cimg\n    width=\"100%\"\n    alt=\"vercel\"\n    src=\"./static/sponsors/vercel.png\"\n  /\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://www.cypress.io\"\u003e\n  \u003cimg\n    width=\"100%\"\n    alt=\"cypress\"\n    src=\"./static/sponsors/cypress.png\"\n  /\u003e\n\u003c/a\u003e\n\n[package]: https://www.npmjs.com/package/@vime/core\n[package-badge]: https://img.shields.io/npm/v/@vime/core\n[license]: https://github.com/vime-js/vime/blob/master/LICENSE\n[license-badge]: https://img.shields.io/github/license/vime-js/vime?color=blue\n[docs]: https://vimejs.com\n[docs-badge]: https://img.shields.io/badge/docs-https://vimejs.com-green\n[semantic-release]: https://github.com/semantic-release/semantic-release\n[semantic-release-badge]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg\n[jsdelivr]: https://www.jsdelivr.com/package/npm/@vime/core\n[jsdelivr-badge]: https://data.jsdelivr.com/v1/package/npm/@vime/core/badge?style=rounded\n[release-badge]: https://github.com/vime-js/vime/workflows/Release/badge.svg?branch=master\n[discord]: https://discord.com/invite/7RGU7wvsu9\n[discord-badge]: https://img.shields.io/badge/chat-on%20discord-7389D8\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvime-js%2Fvime","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvime-js%2Fvime","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvime-js%2Fvime/lists"}