Project Icon

vime

多功能、跨平台的开源媒体播放器

Vime是一个开源的媒体播放器项目,支持HTML5、HLS、YouTube等多种媒体源。它提供统一API,确保跨浏览器兼容性,支持国际化和无障碍访问。Vime基于Web组件设计,易于定制和扩展,并提供主流前端框架的集成。其轻量级设计和丰富功能使其成为构建现代媒体播放器的有力工具。

⚠️  Vime 即将被弃用!了解更多 ⚠️
Vime 标志

Vime 是一个可定制、可扩展、无障碍且与框架无关的媒体播放器。

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

Vime 2 - 视频播放器截图

✨ 特性

  • 🎥  多提供商支持(HTML5、HLS、YouTube、Vimeo 等)。
  • 👑  一套 API 统领全局!下次需要播放器时无需重新学习。
  • ♾️  避免媒体相关 API(如全屏和画中画)的跨浏览器差异。
  • 👐  通过 ARIA 角色/状态/属性和键盘支持,[无障碍][accessibility]适用于所有人。
  • 🌎  支持国际化。
  • 🖥  同时考虑移动端和桌面端设计。
  • 👌  触摸输入友好。
  • 🎨  使用 [CSS 变量][css-vars]自由定制样式。默认包含[浅色][light-theme]和[深色][dark-theme]主题。
  • 🏎️  性能出色,开箱即用的[预连接][preconnections]和组件及媒体的[懒加载][lazy-loading]。
  • 🧩  轻松构建自己的组件并扩展 Vime。
  • 🗑️  轻量级 - 单独使用约 25kB(gzip 压缩),带默认 Vime UI 约 47kB。
  • ️🧰  音频/视频/直播媒体的出色默认自定义 UI。
  • 🛠  全面的[播放器 API][player-api],包含大量属性、方法和事件。
  • 💪  使用 TypeScript 构建,享受完全类型化的组件。
  • 🏠  得益于 Web 组件,使用 HTML/CSS/JS 如鱼得水。
  • 🏗️  针对 React、Vue、Svelte、Stencil 和 Angular 的特定框架绑定。

🍭 示例

以下示例使用 Web 组件,但也有适用于 React、Vue、Svelte、Stencil 和 Angular 的绑定。如果想查看它们的效果,请查看我们的演示

<vm-player autoplay muted>
  <vm-video poster="/media/poster.png" cross-origin>
    <!-- 为什么使用 `data-src`?懒加载。如果不需要,可以直接使用 `src`。 -->
    <source data-src="/media/video.mp4" type="video/mp4" />
    <track
      default
      kind="subtitles"
      src="/media/subs/en.vtt"
      srclang="en"
      label="English"
    />
  </vm-video>

  <!-- 加载默认 Vime UI。 -->
  <vm-default-ui />
</vm-player>

原生 UI?

<!-- 这里我们请求使用原生控件。 -->
<vm-player autoplay muted controls>
  <vm-audio cross-origin>
    <source data-src="/media/audio.mp3" type="audio/mp3" />
  </vm-audio>
</vm-player>

自定义 UI?

<!-- 让我们为播放器添加一点色彩。 -->
<vm-player autoplay muted style="--vm-player-theme: #1873d3">
  <!-- 加载 YouTube 视频。 -->
  <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>

🏗️ 框架

有针对以下框架的特定绑定:

请记住,Vime 的核心仍然是 Web 组件。即使您的框架未在上述列表中提及,它很可能仍然原生支持 Vime。您可以在这里查看您的框架是否完全支持 Web 组件。

还有使用以下技术加载和使用 Vime 的示例

🖥️ 浏览器

Vime 具有前瞻性思维,专为现代网络而设计。所有兼容 ES6 的浏览器都受支持,其中一些列举如下:

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

🎥 提供商

📖 文档

文档可在 https://vimejs.com 找到。

🙋 支持

如果您需要任何与 Vime 相关的帮助,欢迎加入我们的 Discord 频道。 请记住要保持尊重和耐心,因为这是一个社区驱动的项目。

🔨 贡献

如果您想为构建更好的网络媒体播放器做出贡献,那么您需要的所有信息都可以在贡献指南中找到。

❤️ 赞助商

非常感谢我们的赞助商对 Vime 等开源项目的支持。

mux vercel cypress
项目侧边栏1项目侧边栏2
推荐项目
Project Cover

豆包MarsCode

豆包 MarsCode 是一款革命性的编程助手,通过AI技术提供代码补全、单测生成、代码解释和智能问答等功能,支持100+编程语言,与主流编辑器无缝集成,显著提升开发效率和代码质量。

Project Cover

AI写歌

Suno AI是一个革命性的AI音乐创作平台,能在短短30秒内帮助用户创作出一首完整的歌曲。无论是寻找创作灵感还是需要快速制作音乐,Suno AI都是音乐爱好者和专业人士的理想选择。

Project Cover

有言AI

有言平台提供一站式AIGC视频创作解决方案,通过智能技术简化视频制作流程。无论是企业宣传还是个人分享,有言都能帮助用户快速、轻松地制作出专业级别的视频内容。

Project Cover

Kimi

Kimi AI助手提供多语言对话支持,能够阅读和理解用户上传的文件内容,解析网页信息,并结合搜索结果为用户提供详尽的答案。无论是日常咨询还是专业问题,Kimi都能以友好、专业的方式提供帮助。

Project Cover

阿里绘蛙

绘蛙是阿里巴巴集团推出的革命性AI电商营销平台。利用尖端人工智能技术,为商家提供一键生成商品图和营销文案的服务,显著提升内容创作效率和营销效果。适用于淘宝、天猫等电商平台,让商品第一时间被种草。

Project Cover

吐司

探索Tensor.Art平台的独特AI模型,免费访问各种图像生成与AI训练工具,从Stable Diffusion等基础模型开始,轻松实现创新图像生成。体验前沿的AI技术,推动个人和企业的创新发展。

Project Cover

SubCat字幕猫

SubCat字幕猫APP是一款创新的视频播放器,它将改变您观看视频的方式!SubCat结合了先进的人工智能技术,为您提供即时视频字幕翻译,无论是本地视频还是网络流媒体,让您轻松享受各种语言的内容。

Project Cover

美间AI

美间AI创意设计平台,利用前沿AI技术,为设计师和营销人员提供一站式设计解决方案。从智能海报到3D效果图,再到文案生成,美间让创意设计更简单、更高效。

Project Cover

AIWritePaper论文写作

AIWritePaper论文写作是一站式AI论文写作辅助工具,简化了选题、文献检索至论文撰写的整个过程。通过简单设定,平台可快速生成高质量论文大纲和全文,配合图表、参考文献等一应俱全,同时提供开题报告和答辩PPT等增值服务,保障数据安全,有效提升写作效率和论文质量。

投诉举报邮箱: service@vectorlightyear.com
@2024 懂AI·鲁ICP备2024100362号-6·鲁公网安备37021002001498号