# Player (/zh-CN/api-reference/whiteboard/whiteboard-sdk/web/interfaces/player)

> For AI agents: see the complete documentation index at [llms.txt](/llms.txt).

```ts
export declare interface Player extends Displayer
```

## 成员 [#成员]

- [roomUUID](/zh-CN/api-reference/whiteboard/whiteboard-sdk/web/interfaces/player#roomuuid)
- [slice](/zh-CN/api-reference/whiteboard/whiteboard-sdk/web/interfaces/player#slice)
- [isPlayable](/zh-CN/api-reference/whiteboard/whiteboard-sdk/web/interfaces/player#isplayable)
- [phase](/zh-CN/api-reference/whiteboard/whiteboard-sdk/web/interfaces/player#phase)
- [state](/zh-CN/api-reference/whiteboard/whiteboard-sdk/web/interfaces/player#state)
- [progressTime](/zh-CN/api-reference/whiteboard/whiteboard-sdk/web/interfaces/player#progresstime)
- [timeDuration](/zh-CN/api-reference/whiteboard/whiteboard-sdk/web/interfaces/player#timeduration)
- [framesCount](/zh-CN/api-reference/whiteboard/whiteboard-sdk/web/interfaces/player#framescount)
- [beginTimestamp](/zh-CN/api-reference/whiteboard/whiteboard-sdk/web/interfaces/player#begintimestamp)
- [playbackSpeed](/zh-CN/api-reference/whiteboard/whiteboard-sdk/web/interfaces/player#playbackspeed)
- [play](/zh-CN/api-reference/whiteboard/whiteboard-sdk/web/interfaces/player#play)
- [pause](/zh-CN/api-reference/whiteboard/whiteboard-sdk/web/interfaces/player#pause)
- [stop](/zh-CN/api-reference/whiteboard/whiteboard-sdk/web/interfaces/player#stop)
- [seekToProgressTime](/zh-CN/api-reference/whiteboard/whiteboard-sdk/web/interfaces/player#seektoprogresstime)
- [setObserverMode](/zh-CN/api-reference/whiteboard/whiteboard-sdk/web/interfaces/player#setobservermode)

## 继承自 Displayer [#继承自-displayer]

## Properties [#properties]

<a id="roomuuid"></a>

### roomUUID [#roomuuid]

readonly roomUUID: string;

```text
录像所属的房间 UUID
```

<a id="slice"></a>

### slice [#slice]

readonly slice: string;

```text
当前录像所属的分片唯一识别符
```

<a id="isplayable"></a>

### isPlayable [#isplayable]

readonly isPlayable: boolean;

```text
当前是否能立即播放（可能会缓冲）
```

<a id="phase"></a>

### phase [#phase]

readonly phase: PlayerPhase;

```text
回放播放器连接的阶段
```

<a id="state"></a>

### state [#state]

readonly state: PlayerState;

```text
业务状态
阅读 [《房间与回放的业务状态管理》](/javascript-zh/home/business-state-management) 、[《房间业务状态管理》](/document-zh/home/business-state-management) 以了解更多。
```

<a id="progresstime"></a>

### progressTime [#progresstime]

readonly progressTime: number;

```text
播放进度（毫秒），录像开始时为 0
```

<a id="timeduration"></a>

### timeDuration [#timeduration]

readonly timeDuration: number;

```text
录像时长（毫秒）
```

<a id="framescount"></a>

### framesCount [#framescount]

readonly framesCount: number;

```text
录像总帧数
```

<a id="begintimestamp"></a>

### beginTimestamp [#begintimestamp]

readonly beginTimestamp: number;

```text
录像开始的绝对时间戳（unix 时间，毫秒）
```

<a id="playbackspeed"></a>

### playbackSpeed [#playbackspeed]

<ApiSignature>

playbackSpeed: number;

</ApiSignature>

```text
播放速度倍率，取 1.0 表明正常速度播放
```

<a id="callbacks"></a>

### callbacks [#callbacks]

readonly callbacks: Callbacks&lt;CALLBACKS&gt;;

<a id="observerid"></a>

### observerId [#observerid]

readonly observerId: number;

<a id="region"></a>

### region [#region]

readonly region: string;

<a id="version"></a>

### version [#version]

readonly version: string;

<a id="devicetype"></a>

### deviceType [#devicetype]

readonly deviceType: DeviceType;

<a id="screentype"></a>

### screenType [#screentype]

readonly screenType: ScreenType;

<a id="enablewritenow"></a>

### enableWriteNow [#enablewritenow]

readonly enableWriteNow: boolean;

<a id="handtoolkey"></a>

### handToolKey [#handtoolkey]

readonly handToolKey: string | undefined;

<a id="views"></a>

### views [#views]

readonly views: Views;

<a id="usemobxstate"></a>

### useMobXState [#usemobxstate]

readonly useMobXState: boolean;

<a id="usemultiviews"></a>

### useMultiViews [#usemultiviews]

readonly useMultiViews: boolean;

<a id="handtoolactive"></a>

### handToolActive [#handtoolactive]

<ApiSignature>

handToolActive: boolean;

</ApiSignature>

<a id="disableothersselectingbox"></a>

### disableOthersSelectingBox [#disableothersselectingbox]

<ApiSignature>

disableOthersSelectingBox: boolean;

</ApiSignature>

<a id="disablecameratransform"></a>

### disableCameraTransform [#disablecameratransform]

<ApiSignature>

disableCameraTransform: boolean;

</ApiSignature>

<a id="commandwheeltozoom"></a>

### commandWheelToZoom [#commandwheeltozoom]

<ApiSignature>

commandWheelToZoom: boolean;

</ApiSignature>

## Methods [#methods]

<a id="play"></a>

### play [#play]

<ApiSignature>

play(): void;

</ApiSignature>

```text
播放
```

<ApiReturns>

<ApiReturnType>

void

</ApiReturnType>

</ApiReturns>

<a id="pause"></a>

### pause [#pause]

<ApiSignature>

pause(): void;

</ApiSignature>

```text
暂停
```

<ApiReturns>

<ApiReturnType>

void

</ApiReturnType>

</ApiReturns>

<a id="stop"></a>

### stop [#stop]

<ApiSignature>

stop(): void;

</ApiSignature>

```text
停止
```

<ApiReturns>

<ApiReturnType>

void

</ApiReturnType>

</ApiReturns>

<a id="seektoprogresstime"></a>

### seekToProgressTime [#seektoprogresstime]

<ApiSignature>

seekToProgressTime(progressTime: number): Promise&lt;PlayerSeekingResult&gt;;

</ApiSignature>

```text
跳转到特定进度
```

<ApiReturns>

<ApiReturnType>

Promise&lt;PlayerSeekingResult&gt;

</ApiReturnType>

</ApiReturns>

<a id="setobservermode"></a>

### setObserverMode [#setobservermode]

<ApiSignature>

setObserverMode(observerMode: ObserverMode): void;

</ApiSignature>

```text
修改观察模式
```

<ApiReturns>

<ApiReturnType>

void

</ApiReturnType>

</ApiReturns>

<a id="refreshviewsize"></a>

### refreshViewSize [#refreshviewsize]

<ApiSignature>

refreshViewSize(): void;

</ApiSignature>

<ApiReturns>

<ApiReturnType>

void

</ApiReturnType>

</ApiReturns>

<a id="setcamerabound"></a>

### setCameraBound [#setcamerabound]

<ApiSignature>

setCameraBound(cameraBound: CameraBound): void;

</ApiSignature>

<ApiReturns>

<ApiReturnType>

void

</ApiReturnType>

</ApiReturns>

<a id="createscenescallback"></a>

### createScenesCallback [#createscenescallback]

<ApiSignature>

createScenesCallback(path: string, callbacks?: Partial&lt;ScenesCallbacks&gt;): ScenesCallbacksNode | null;

</ApiSignature>

<ApiReturns>

<ApiReturnType>

ScenesCallbacksNode | null

</ApiReturnType>

</ApiReturns>

<a id="memberstate"></a>

### memberState [#memberstate]

<ApiSignature>

memberState(memberId: number): MemberState;

</ApiSignature>

<ApiReturns>

<ApiReturnType>

MemberState

</ApiReturnType>

</ApiReturns>

<a id="movecamera"></a>

### moveCamera [#movecamera]

<ApiSignature>

moveCamera(camera: Partial&lt;Camera&gt; & Readonly&lt;\{ animationMode?: AnimationMode; \}&gt;): void;

</ApiSignature>

<ApiReturns>

<ApiReturnType>

void

</ApiReturnType>

</ApiReturns>

<a id="movecameratocontain"></a>

### moveCameraToContain [#movecameratocontain]

<ApiSignature>

moveCameraToContain(rectangle: Rectangle & Readonly&lt;\{ animationMode?: AnimationMode; \}&gt;): void;

</ApiSignature>

<ApiReturns>

<ApiReturnType>

void

</ApiReturnType>

</ApiReturns>

<a id="bindhtmlelement"></a>

### bindHtmlElement [#bindhtmlelement]

<ApiSignature>

bindHtmlElement(element: HTMLDivElement | null): void;

</ApiSignature>

<ApiReturns>

<ApiReturnType>

void

</ApiReturnType>

</ApiReturns>

<a id="getinvisibleplugin"></a>

### getInvisiblePlugin [#getinvisibleplugin]

<ApiSignature>

getInvisiblePlugin&lt;A extends Object, MA extends Object&gt;(kind: string): InvisiblePlugin&lt;A, MA&gt; | null;

</ApiSignature>

<ApiReturns>

<ApiReturnType>

InvisiblePlugin&lt;A, MA&gt; | null

</ApiReturnType>

</ApiReturns>

<a id="converttopointinworld"></a>

### convertToPointInWorld [#converttopointinworld]

<ApiSignature>

convertToPointInWorld(point: \{ x: number; y: number; \}): \{ x: number; y: number; \};

</ApiSignature>

<ApiReturns>

<ApiReturnType>

\{ x: number; y: number; \}

</ApiReturnType>

</ApiReturns>

<a id="scenepreview"></a>

### scenePreview [#scenepreview]

<ApiSignature>

scenePreview(scenePath: string, div: HTMLElement, width?: number, height?: number, engine?: RenderEngine): void;

</ApiSignature>

<ApiReturns>

<ApiReturnType>

void

</ApiReturnType>

</ApiReturns>

<a id="generatescreenshot"></a>

### generateScreenshot [#generatescreenshot]

<ApiSignature>

generateScreenshot(scenePath?: string, width?: number, height?: number): Promise&lt;string&gt;;

</ApiSignature>

<ApiReturns>

<ApiReturnType>

Promise&lt;string&gt;

</ApiReturnType>

</ApiReturns>

<a id="fillscenesnapshot"></a>

### fillSceneSnapshot [#fillscenesnapshot]

<ApiSignature>

fillSceneSnapshot(scenePath: string, div: HTMLElement, width?: number, height?: number, engine?: RenderEngine): void;

</ApiSignature>

<ApiReturns>

<ApiReturnType>

void

</ApiReturnType>

</ApiReturns>

<a id="screenshottocanvas"></a>

### screenshotToCanvas [#screenshottocanvas]

<ApiSignature>

screenshotToCanvas(context: CanvasRenderingContext2D, scenePath: string, width: number, height: number, camera: Camera, ratio?: number): void;

</ApiSignature>

<ApiReturns>

<ApiReturnType>

void

</ApiReturnType>

</ApiReturns>

<a id="screenshottocanvasasync"></a>

### screenshotToCanvasAsync [#screenshottocanvasasync]

<ApiSignature>

screenshotToCanvasAsync(context: CanvasRenderingContext2D, scenePath: string, width: number, height: number, camera: Camera, ratio?: number, timeout?: number): Promise&lt;void&gt;;

</ApiSignature>

<ApiReturns>

<ApiReturnType>

Promise&lt;void&gt;

</ApiReturnType>

</ApiReturns>

<a id="getboundingrect"></a>

### getBoundingRect [#getboundingrect]

<ApiSignature>

getBoundingRect(scenePath: string): Rectangle;

</ApiSignature>

<ApiReturns>

<ApiReturnType>

Rectangle

</ApiReturnType>

</ApiReturns>

<a id="addmagixeventlistener"></a>

### addMagixEventListener [#addmagixeventlistener]

<ApiSignature>

addMagixEventListener(event: string, listener: EventListener, options?: MagixEventListenerOptions): void;

</ApiSignature>

<ApiSignature>

addMagixEventListener(event: string, listener: EventsListener, fireInterval: number): void;

</ApiSignature>

<ApiReturns>

<ApiReturnType>

void

</ApiReturnType>

</ApiReturns>

<ApiReturns>

<ApiReturnType>

void

</ApiReturnType>

</ApiReturns>

<a id="removemagixeventlistener"></a>

### removeMagixEventListener [#removemagixeventlistener]

<ApiSignature>

removeMagixEventListener(event: string, listener?: EventListener): void;

</ApiSignature>

<ApiReturns>

<ApiReturnType>

void

</ApiReturnType>

</ApiReturns>

<a id="waitmagixevent"></a>

### waitMagixEvent [#waitmagixevent]

<ApiSignature>

waitMagixEvent(filter: EventFilter): Promise&lt;Event&gt;;

</ApiSignature>

<ApiReturns>

<ApiReturnType>

Promise&lt;Event&gt;

</ApiReturnType>

</ApiReturns>

<a id="scaleppttofit"></a>

### scalePptToFit [#scaleppttofit]

<ApiSignature>

scalePptToFit(animationMode?: AnimationMode): void;

</ApiSignature>

<ApiReturns>

<ApiReturnType>

void

</ApiReturnType>

</ApiReturns>

<a id="scenepathtype"></a>

### scenePathType [#scenepathtype]

<ApiSignature>

scenePathType(path: string): ScenePathType;

</ApiSignature>

<ApiReturns>

<ApiReturnType>

ScenePathType

</ApiReturnType>

</ApiReturns>

<a id="entirescenes"></a>

### entireScenes [#entirescenes]

<ApiSignature>

entireScenes(): SceneMap;

</ApiSignature>

<ApiReturns>

<ApiReturnType>

SceneMap

</ApiReturnType>

</ApiReturns>

<a id="getscene"></a>

### getScene [#getscene]

<ApiSignature>

getScene(path: string): WhiteScene | undefined;

</ApiSignature>

<ApiReturns>

<ApiReturnType>

WhiteScene | undefined

</ApiReturnType>

</ApiReturns>