✨ 特性
- 🎥 多提供商支持(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 等开源项目的支持。