Vime–可定制可扩展且与框架无关的媒体播放器

Vedu • 2020-12-30 14:04 • 资源分享 • 阅读 1289

介绍

Vime是一个可定制，可扩展，可靠且与框架无关的开源Web端媒体播放器。

Github

https://github.com/vime-js/vime

功能

多种媒体支持，包括H5
一个API搞定一些！下次需要播放器时，不必重新学习任何内容。
避免在跨媒体浏览器上使用与媒体相关的API，例如全屏和画中画。
通过ARIA角色/状态/属性和键盘支持可访问所有对象。
I18N 支持。
设计时兼顾了移动设备和PC。
触摸设备友好。
使用CSS变量设置所需样式。包括默认的浅色和深色主题。
Perform️Performer 具有预连接开箱即用的组件和媒体的延迟加载。
轻松构建自己的组件并扩展Vime。
Light️ 轻巧-独立的〜25kB（gzip），默认的Vime UI约为47kB。
️默认自定义UI，适用于音频/视频/直播媒体。
全面的播放器API，具有大量的属性，方法和事件。
使用TypeScript构建
借助Web组件
针对React，Vue，Svelte，Stencil和Angular的特定于框架的封装。

示例

以下示例使用的是Web组件

<vm-player autoplay muted>
  <vm-video poster="/media/poster.png" cross-origin>
    
    <source data-src="/media/video.mp4" type="video/mp4" />
    <track
      default
      kind="subtitles"
      src="/media/subs/en.vtt"
      srclang="en"
      label="English"
    />
  vm-video>

  
  <vm-default-ui />
vm-player>

Native 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">
  <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>

支持的第三方库

当下流行的框架都支持

React
Vue
Svelte
Stencil
Angular

Vime的核心仍然只是Web组件。即使框架未在上面的列表中提及，它很可能仍然原生支持Vime。

浏览器兼容

Vime具有前瞻性思维，是为现代Web构建的。支持所有与ES6兼容的浏览器，下面列出了其中的一些。

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

总结

Web开发中也不乏一些非常优秀的播放器组件，包括Vime以及video.js等等，都是比较优秀的开源播放器，很适合用在自己的项目中，其具备的可自定义功能，为某些复杂需求提供了保障！

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/share/18606.html

Vime–可定制可扩展且与框架无关的媒体播放器

介绍

Github

功能

示例

支持的第三方库

浏览器兼容

总结

相关推荐

发表评论