media-chrome

为您的媒体播放器量身定制的舞衣。:man_dancing:

使用Web组件（原生自定义元素）实现的完全可定制的媒体播放器控件。

兼容任何JavaScript框架（React、Angular、Svelte等）
兼容<video>和<audio>元素以及众多播放器（YouTube、HLS.js等）
简单的HTML代码即可添加/删除控件
简单的CSS代码即可设置控件样式

由Mux和Video.js的创始人推出。

文档

访问Media Chrome官方文档获取最新的使用说明。

您可以在这里找到media-chrome v0.x版本的文档。

示例

<a href="https://media-chrome.mux.dev/examples/vanilla/" target="_blank">查看所有实际运行的仓库示例。</a>

视频示例

<script type="module" src="https://cdn.jsdelivr.net/npm/media-chrome@4/+esm"></script>

<media-controller>
  <video
    slot="media"
    src="https://stream.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/high.mp4"
    crossorigin
  >
    <track
      label="thumbnails"
      default
      kind="metadata"
      src="https://image.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/storyboard.vtt"
    />
  </video>
  <media-control-bar>
    <media-play-button></media-play-button>
    <media-mute-button></media-mute-button>
    <media-volume-range></media-volume-range>
    <media-time-range></media-time-range>
    <media-pip-button></media-pip-button>
    <media-fullscreen-button></media-fullscreen-button>
  </media-control-bar>
</media-controller>

效果（<a href="https://codepen.io/heff/pen/ZEGdBzN?editors=1000" target="_blank">尝试CodePen示例</a>）

音频示例

<script type="module" src="https://cdn.jsdelivr.net/npm/media-chrome@4/+esm"></script>

<media-controller audio>
  <audio
    slot="media"
    src="https://stream.mux.com/O4h5z00885HEucNNa1rV02wZapcGp01FXXoJd35AHmGX7g/audio.m4a"
  ></audio>
  <media-control-bar>
    <media-play-button></media-play-button>
    <media-time-display showduration></media-time-display>
    <media-time-range></media-time-range>
    <media-playback-rate-button></media-playback-rate-button>
    <media-mute-button></media-mute-button>
    <media-volume-range></media-volume-range>
  </media-control-bar>
</media-controller>

结果（<a href="https://codepen.io/heff/pen/wvdyNWd?editors=1000" target="_blank">试试 CodePen 示例</a>）

与 React 一起使用

虽然技术上你可以直接在 React 中使用 Media Chrome 元素，但在 React 中使用 Web 组件有时可能会有些笨拙，有些东西对于框架来说就是不太符合习惯（例如：必须使用 class= 而不是 className=，更多详情请参阅 React 官方文档中关于 Web 组件的部分）。为了解决这个问题，我们为所有核心元素发布了一些 React 包装组件。你可以在这里了解如何使用它们。

为什么？

Web 设计师和开发者通常只使用默认的媒体播放器控件，即使在创建漂亮的自定义设计主题时也是如此。这很难避免。

Web 浏览器有内置的媒体控件，这些控件难以自定义，而且在每个浏览器中的外观都不同。
像 YouTube、Vimeo 和 SoundCloud 这样的社交网站只允许你自定义播放器的一些小细节，比如主按钮的颜色。
媒体控件复杂，很难从头开始构建。像 Video.js 和 JW Player 这样的开源播放器可以提供帮助，但需要你学习专有的 JS API，而且可能难以与流行的 JavaScript 框架一起使用。

这应该更简单... <media-chrome> 就是为了解决这个问题而创建的。