概述
预计阅读时间: 3 分钟
Video.js 播放器的结构方式——状态、UI 和媒体。
Video.js v10 围绕三部分架构构建，分离关注点并最大化灵活性。每个部分都设计为独立工作或一起工作，允许你根据需要或多或少地使用 Video.js。
有关此设计背后的原因，请参阅为什么选择 Video.js？。
1. 状态管理
状态由 Player.Provider 处理，它创建一个中央状态存储，所有组件都可以访问。当你用 Player.Provider 包裹播放器时，组件会自动连接到状态。
{/* 内部所有组件自动连接到状态 */}
<Player.Provider>
<VideoSkin>
<Video src="video.mp4" />
</VideoSkin>
</Player.Provider>
你可以使用 usePlayer hook 从提供者内的任何位置访问状态和方法。
2. 用户界面
使用预构建的皮肤或从单个UI 组件构建你自己的皮肤。
皮肤
皮肤是完整的、预设计的播放器 UI，将组件和样式打包在一起：
<Player.Provider>
<VideoSkin>
<Video src="video.mp4" />
</VideoSkin>
</Player.Provider>
了解更多关于皮肤
UI 组件
如果你想要比皮肤提供的更多控制，你可以从我们的组件构建自己的 UI。
<Player.Provider>
<Player.Container>
<Video src="video.mp4" />
<MediaControls>
<PlayButton />
{/* ... */}
</MediaControls>
</Player.Container>
</Player.Provider>
要开始了解 UI 组件，你可以考虑弹出皮肤并使用其预样式组件作为基础。
了解更多关于 UI 组件
构建你自己的组件
3. 媒体
媒体组件是实际显示媒体的组件。它们本质上是"没有 UI 的播放器"。它们处理视频/音频渲染并暴露一致的 API。
媒体组件可以是特定格式的（HLS、DASH）、特定服务的（YouTube、Vimeo、Mux）或特定用例的（背景视频）。
NOTE
DASH、YouTube、Vimeo、Mux 和更多媒体元素目前正在开发中。
<Player.Provider>
<VideoSkin>
<HlsVideo src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" />
</VideoSkin>
</Player.Provider>
预设
预设为特定用例预配置这些部分。
默认预设是 @videojs/react/video 和 @videojs/react/audio，涵盖你对 HTML <video> 和 <audio> 标签期望的基线控件集。
除了默认预设外，预设还针对更具体的用例。例如，/background 包括内置自动播放、静音和循环的媒体元素、没有控件的皮肤，以及为其提供动力所需的功能：
import { createPlayer } from '@videojs/react';
import { backgroundFeatures, BackgroundVideo, BackgroundVideoSkin } from '@videojs/react/background';
const Player = createPlayer({ features: backgroundFeatures });
function Hero() {
return (
<Player.Provider>
<BackgroundVideoSkin>
<BackgroundVideo src="hero.mp4" />
</BackgroundVideoSkin>
</Player.Provider>
);
}
了解更多关于预设
上一步： 为什么选择 Video.js？
下一步： 使用 AI 构建
