开源推荐：使用Vime.js添加视频

Vime是一个可定制，可扩展，可访问且与框架无关的媒体播放器。

✨ 特性

• 🎥 多提供商支持（HTML5，HLS，YouTube，Vimeo等）。
• 👑  一个API来统治一切！下次你需要播放器时，不要再重新学习任何东西。
• ♾️ 避免在媒体相关API上的跨浏览器差异，如全屏和画中画。
• 👐 通过ARIA角色/状态/属性和键盘支持，所有人都可以访问。
• 🌎 国际化支持
• 🖥 设计时兼顾了移动设备和台式机。
• 👌 触摸输入友好。
• 🎨 使用CSS变量来设计任何你想要的风格，包括默认的浅色和深色主题。
• 🏎️ 性能上采用预连接+开箱即用的懒加载组件和媒介。
• 🧩 轻松构建自己的组件并扩展Vime。
• 🗑️ 轻量级-独立的〜25kB（gzip），使用默认的Vime UI的〜47kB。
• 🧰 很棒的默认自定义UI，用于音频/视频/流媒体。
• 🛠 具有大量属性，方法和事件的综合播放器API。
• 💪 用TypeScript构建，所以你可以享受完全类型化的组件。
• 🏠 借助Web组件，可以在家中使用HTML / CSS / JS。
• 🏗️ 针对React、Vue、Svelte、Stencil和Angular的框架特定绑定。

🍭 示例

下面的例子使用的是Web组件，但也有React、Vue、Svelte、Stencil和Angular的绑定。如果你想看看它们的外观，请查看我们的Demo。

<vime-player autoplay muted>
  <vime-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"
    />
  </vime-video>

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

原生UI？

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

自定义UI？

<!-- 我们在整个播放器中添加一点色彩。-->
<vime-player autoplay muted style="--vm-player-theme: #1873d3">
  <!-- 加载YouTube视频。-->
  <vime-youtube video-id="DyTCOwB0DVw" />

  <vime-ui>
    <vime-click-to-play />
    <vime-captions />
    <vime-poster />
    <vime-spinner />
    <vime-default-settings />
    <vime-controls pin="bottomLeft" active-duration="2750" full-width>
      <!-- 
        这些都是可以轻松自定义的预定义控件，你也可以完全从头构建自己的控件。
      -->
      <vime-playback-control tooltip-direction="right" />
      <vime-volume-control />
      <vime-time-progress />
      <vime-control-spacer />
      <vime-caption-control />
      <vime-pip-control keys="p" />
      <vime-settings-control />
      <vime-fullscreen-control keys="f" tooltip-direction="left" />
    </vime-controls>
  </vime-ui>
</vime-player>

🏗️ 框架

有以下特定于框架的绑定：

• React
• Vue
• Svelte
• Stencil
• Angular

请记住，Vime的核心仍然是简单的Web组件。即使你的框架没有在上面的列表中提到，它也很可能原生支持Vime。你可以在这里检查你的框架是否对Web组件有完整的支持。

https://custom-elements-everywhere.com/

还有一些通过以下方式加载和使用Vime的示例：

• HTML
• Rollup
• Webpack
• React
• Vue 2
• Vue 3
• Svelte
• Stencil
• Angular

🖥️ 浏览器支持

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

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

🎥 Providers

• HTML5
• HLS
• Dash
• YouTube
• Vimeo
• Dailymotion

获取地址：请在公众号对话框中回复关键字：20201202

---

粉丝福利

137期留言+在看幸运用户：断线，速找我领取红包。

临走前留下，今天的福利

• 福利1：《JavaScript高级与设计模式》视频教程 获取资源请在公众号对话框中回复关键字：042，如果没有关注请扫下面的二维码
• 福利2：在看+留言，我随机抽取一位认真留言的小伙伴，给他发一个5~10不等的红包奖励

更多好文

• 将HTML表格转换成精美的PDF的几种方案比较
  
• 思维训练：如何设计一个JavaScript插件系统？

- END -

点赞 + 在看 + 留言，下一个幸运儿就是你！
走心的分享更容易被抽中~
开奖时间 下期文末