vime

<div align="center"> ⚠️  Vime 即将被弃用！<a target="_blank" rel="noopener noreferrer" href="https://github.com/vime-js/vime/issues/376">了解更多</a> ⚠️ </div> <div align="center"> <img width="150" src="https://raw.githubusercontent.com/vime-js/vime/master/static/identity/vime.png" alt="Vime 标志" />

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

</div>

✨ 特性

🎥 多提供商支持（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>