Npmlibrary

Player.Container

预计阅读时间: 4 分钟

Player.Container 是播放器的物理表面。它定义了视觉边界、附加媒体元素，并检测用户交互（如活动和手势、键盘输入）。它位于 Player.Provider 内部。

<Player.Provider>
  <Player.Container>
    <video src="video.mp4" />
    <Controls />
  </Player.Container>
</Player.Provider>

如何创建

Player.Container 来自创建 Player.Provider 的同一个 createPlayer() 调用。它们是配对的，连接到同一组功能特性。

import { createPlayer } from '@videojs/react';
import { videoFeatures } from '@videojs/react/video';

const Player = createPlayer({ features: videoFeatures });

功能

布局和全屏

容器是媒体和控件周围的视觉盒子。尺寸、宽高比和视觉边界都放在这里 — 放在容器上，而不是 Provider 上。

<Player.Container style={{ width: 640, aspectRatio: '16/9' }}>
  <video src="video.mp4" />
  <Controls />
</Player.Container>

当用户进入全屏时，容器进入全屏 — 而不是视频元素。这使得控件和其他 UI 在视频上方保持可见，因为它们是容器的子元素。

媒体附加

媒体发现由 Provider 处理，而不是容器。当媒体组件（如 <Video>）通过 context 注册自己时，Provider 将其连接到存储和播放器的所有功能特性。

交互表面

容器是用户意图进入播放器的地方。它监听其表面上的物理交互并将其转化为播放器行为：

用户活动 — 容器内的鼠标移动、触摸和键盘活动驱动空闲检测。这是控件知道何时显示和隐藏的方式。
手势 — 点击播放、双击全屏、滑动跳转以及其他触摸/鼠标手势。通过 Gesture 组件配置。
键盘控件 — 空格键播放/暂停、方向键跳转以及其他限定在容器范围内的键盘快捷键。通过 Hotkey 组件配置。

与皮肤的关系

皮肤是容器加上 UI 控件。当你使用打包的皮肤时，容器是内置的 — 你不需要自己添加。

{/* 打包的皮肤 — 容器在 VideoSkin 内部 */}
<Player.Provider>
  <VideoSkin>
    <Video src="video.mp4" />
  </VideoSkin>
</Player.Provider>

{/* 自定义 UI — 你直接使用 Player.Container */}
<Player.Provider>
  <Player.Container>
    <video src="video.mp4" />
    <PlayButton />
  </Player.Container>
</Player.Provider>

容器内外

Provider 为组件提供状态和操作的访问权限。容器在此基础上增加了物理行为 — 全屏、活动检测、手势处理。组件在两个位置都可以工作；容器只是添加了这些额外功能。

<Player.Provider>
  <Player.Container>
    <video src="video.mp4" />
    <Controls />          {/* 全屏、活动检测、手势 */}
  </Player.Container>

  <Transcript />          {/* 状态和操作，但没有容器行为 */}
  <PlaylistSidebar />     {/* 状态和操作，但没有容器行为 */}
</Player.Provider>

容器外部的播放按钮仍然可以读取播放状态并切换播放/暂停 — 它只是不会随播放器全屏或响应容器的空闲状态。

参见

Player.Provider - 状态提供者

#Player.Container

#如何创建

#功能

#布局和全屏

#媒体附加

#交互表面

#与皮肤的关系

#容器内外

#参见