Player.usePlayer
预计阅读时间: 3 分钟
在 Player.Provider 内访问播放器存储的钩子。
Player.usePlayer 让你可以从 Player.Provider 内的任何组件访问播放器存储。它有两个重载——不带参数用于直接存储访问，或带选择器用于响应式状态订阅。Player.usePlayer 的类型与你传递给 createPlayer 的功能相对应。它也可以作为独立导入使用（import { usePlayer } from '@videojs/react'），但独立版本返回的是无类型存储。
示例
存储访问
不带参数调用 Player.usePlayer() 获取存储实例。用于命令式操作，如播放、暂停和音量更改。组件不会在状态变更时重新渲染。
import { createPlayer } from '@videojs/react';
import { Video, videoFeatures } from '@videojs/react/video';
const Player = createPlayer({
features: videoFeatures,
});
function Controls() {
const store = Player.usePlayer();
return (
<div className="controls">
<button type="button" onClick={() => store.play()}>
Play
</button>
<button type="button" onClick={() => store.pause()}>
Pause
</button>
</div>
);
}
export default function StoreAccess() {
return (
<Player.Provider>
<Player.Container className="media-container">
<Video
src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
autoPlay
muted
playsInline
loop
/>
<Controls />
</Player.Container>
</Player.Provider>
);
}
选择器订阅
传递选择器函数来订阅特定状态。当所选值变更时，组件会重新渲染，默认使用浅相等比较。
import { createPlayer } from '@videojs/react';
import { Video, videoFeatures } from '@videojs/react/video';
const Player = createPlayer({
features: videoFeatures,
});
function StateDisplay() {
const state = Player.usePlayer((s) => ({
paused: s.paused,
currentTime: s.currentTime,
duration: s.duration,
}));
return (
<dl className="panel">
<div>
<dt>Paused</dt>
<dd>{String(state.paused)}</dd>
</div>
<div>
<dt>Time</dt>
<dd>
{state.currentTime.toFixed(1)}s / {state.duration.toFixed(1)}s
</dd>
</div>
</dl>
);
}
export default function Selector() {
return (
<Player.Provider>
<Player.Container className="media-container">
<Video
src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
autoPlay
muted
playsInline
loop
/>
<StateDisplay />
</Player.Container>
</Player.Provider>
);
}
API 参考
不带选择器
从 Player Provider 内访问播放器存储。
返回值
BaseStore & UnknownState
带选择器
从播放器存储中选择一个值。当所选值变更时重新渲染。
参数
| 参数 | 类型 | 默认值 | 说明 |
|---|
selector* | function | — | 从播放器存储状态派生值。类型：((state: UnknownState) => R) |
返回值
R
参见
