Npmlibrary

皮肤

预计阅读时间: 3 分钟

打包的播放器设计，包括 UI 组件及其样式。

v10 新功能

在 Video.js 的早期版本中，皮肤是应用于同一组默认控件的纯 CSS 主题。在 v10 中，皮肤的概念已扩展为包括 UI 组件，因此每个皮肤都可以完全独特，并且只包含它需要的 UI 组件。

<Player.Provider>
  <VideoSkin>
    {/* 包裹媒体元素 */}
    <Video src="video.mp4" />
  </VideoSkin>
</Player.Provider>

打包 vs 弹出

当你选择皮肤时，你有两种使用方式：打包或弹出。通常最容易从打包的皮肤开始，当你需要更多自定义时再将其内部组件弹出到你的项目中。

打包	弹出
单个组件	多个 UI 组件
有限的自定义	完全自定义
通过升级版本自动应用未来的设计更新	手动应用未来的设计更新，或故意忽略

了解更多关于弹出皮肤

了解更多关于 UI 组件

打包示例

<Player.Provider>
  <VideoSkin>
    {/* ...媒体... */}
  </VideoSkin>
</Player.Provider>

弹出示例

弹出皮肤后，你将获得所有 UI 组件的源代码，可以完全自定义它们的外观和行为。

// 弹出的皮肤组件示例
<Player.Provider>
  <Player.Container>
    <Video src="video.mp4" />
    <div className="custom-controls">
      <PlayButton />
      <MuteButton />
      <TimeSlider />
      {/* 自定义布局和样式 */}
    </div>
  </Player.Container>
</Player.Provider>

皮肤、功能和预设

皮肤与其功能包紧密依赖——皮肤期望存在特定的功能。媒体元素更具可互换性——你可以替换 HLS 或 DASH 提供程序，而无需更改皮肤或功能。

样式

皮肤使用 CSS 自定义属性（CSS 变量）来定义可定制的样式值。一些皮肤暴露 CSS 自定义属性，允许你轻松调整颜色、间距等。

/* 自定义皮肤样式示例 */
.video-player {
  --media-primary-color: #ff0000;
  --media-control-spacing: 12px;
}

当前限制

弹出皮肤是一个单向操作。一旦弹出，你需要手动合并未来的更新。
某些高级自定义可能需要完全自定义 UI 组件。

上一步： 功能特性

下一步： 预设

#皮肤

#打包 vs 弹出

#打包示例

#弹出示例

#皮肤、功能和预设

#样式

#当前限制

皮肤

打包 vs 弹出

打包示例

弹出示例

皮肤、功能和预设

样式

当前限制