#预设

为特定用例预打包的播放器配置，捆绑状态管理、皮肤和媒体元素。

预设打包了特定播放器用例所需的内容。它可以包括特殊的状态管理、一个或多个用于 UI 的皮肤，以及特定的媒体元素。你可以挑选匹配你要构建内容的预设，而不是单独组装这些部分。

例如，@videojs/react/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 和 /audio。这些涵盖你对 HTML <video> 和 <audio> 标签期望的基线控件集。除了默认预设外，预设还针对更具体的用例——例如，/background 预设需要布局但不需要控件。随着时间的推移，我们会添加更多：短视频播放器、播客播放器、电视流媒体播放器等。

#@videojs/react/video

通用视频播放器预设，具有完整的播放控件。

• 功能包: videoFeatures
• 功能: playback, playbackRate, volume, time, source, buffer, fullscreen, pip, remotePlayback, controls, textTrack, error
• 皮肤: <MinimalVideoSkin>, <VideoSkin>
• 默认媒体元素: <Video>

#@videojs/react/audio

仅音频播放器预设，具有播放和音量控件。

• 功能包: audioFeatures
• 功能: playback, playbackRate, volume, time, source, buffer, error
• 皮肤: <MinimalAudioSkin>, <AudioSkin>
• 默认媒体元素: <Audio>

#@videojs/react/background

环境背景视频预设，没有用户控件。

• 功能包: backgroundFeatures
• 功能: 无
• 皮肤: <BackgroundVideoSkin>
• 默认媒体元素: <BackgroundVideo>

#预设包含什么

每个预设最多导出三样东西：

• 功能包 —— 定义播放器状态和方法的功能数组。例如，视频功能包包括 playback、volume、time、fullscreen 等。

• 皮肤 —— 为该功能包设计的预构建 UI。例如，视频皮肤渲染 fullscreen 和 PiP 控件，因为视频功能包包括这些功能。音频皮肤则不渲染。

• 媒体元素 —— 适合该用例的媒体组件。例如，背景视频元素内置了自动播放、静音和循环。

这些部分并非同等紧密地联系在一起。皮肤与其功能包紧密依赖——皮肤期望存在特定的功能。媒体元素更具可互换性——你可以替换 HLS 或 DASH 提供程序，而无需更改皮肤或功能。

#自定义预设

你可以通过三种方式自定义预设：扩展其功能包、弹出其皮肤或交换其媒体元素。

#扩展功能包

向预设的功能包添加功能以启用新功能。例如，向背景视频添加播放控件：

import { createPlayer, playbackFeature } from '@videojs/react';
import { backgroundFeatures, BackgroundVideo } from '@videojs/react/background';

const Player = createPlayer({
  features: [...backgroundFeatures, playbackFeature],
});

function Hero() {
  return (
    <Player.Provider>
      <Player.Container>
        <BackgroundVideo src="hero.mp4" />
        <PlayButton />
      </Player.Container>
    </Player.Provider>
  );
}

#弹出皮肤

如果预设的皮肤接近但不完全正确，你可以弹出它——将其内部组件复制到你的项目中，然后从那里自定义。

#交换媒体元素

预设的默认媒体元素只是起点。你可以用任何兼容的媒体提供程序替换它。例如，将 HLS 源与视频预设一起使用：

<Player.Provider>
  <VideoSkin>
    <HlsVideo src="https://example.com/stream.m3u8" />
  </VideoSkin>
</Player.Provider>

上一步： 皮肤

下一步： UI 组件