# ストーリーの再生を制御する — Vreo

公開 Player API で一時停止、再開、再生、表示、イベント、破棄を操作します。

Canonical: https://developer.realsee.ai/ja/docs/vreo/playback-controls
Source: https://developer.realsee.ai/ja/docs/vreo/playback-controls.md
Language: ja

# ストーリーの再生を制御する

[クイックスタート](https://developer.realsee.ai/ja/docs/vreo/quickstart) の Player を使い、購読とプレイヤーを同じ所有側でまとめて破棄します。

```ts title="examples/sdk-guides/src/vreo/controls.ts"
import type { Player } from '@realsee/vreo'
import type { VreoUnit } from '@realsee/vreo/typings'

export function bindNarrativeControls(player: Player, report: (status: string) => void) {
  const stops = [
    player.on('loaded', () => report('loaded')),
    player.on('playing', () => report('playing')),
    player.on('paused', (ended) => report(ended ? 'ended' : 'paused'))
  ]
  return {
    pause() { player.pause() },
    resume() { return player.play(player.getCurrentTime(), true) },
    // In 2.6.4 play(0) does not seek; load resets the timeline and keyframes, then starts playback.
    async replay(unit: VreoUnit) { return player.load(unit, 0, false, true, true) },
    hide() { player.hide() },
    show() { player.show() },
    dispose() { stops.forEach((stop) => stop()); player.dispose() }
  }
}
```

返されたメソッドを UI に接続します。時間はミリ秒で、再開には getCurrentTime() を明示します。現在の unit を保持し `await controls.replay(unit)` で再生中・停止中とも 0 から再開します。Promise の完了まで重複操作を防ぎ、拒否と boolean を確認してから再生を通知します。

2.6.4 の play(0) はシークしません。再生中は即時復帰し、一時停止中はゼロの設定を省略します。例は公開 load(unit, 0, false, true, true) で前の再生を取り消し、時間軸とフレームをリセットしてスクリプトをコピーし、操作として開始します。Replay は非同期、Resume の play は同期で、false は開始していない状態です。

<span id="keep-ui-state-honest" class="docs-anchor-alias" aria-hidden="true"></span>

## UI 状態を正しく保つ

公開イベントは loaded・playing・paused です。終了時にも paused が true を受ける場合があり、公開 Player が終了をそのイベントで通知するため例でも使います。

hide() は UI の表示だけを変え、pause() の代わりにはなりません。閉じると停止する場合は両方を呼びます。シーン・ルート交換時は Five より先に Player の dispose を呼び、破棄済みを再使用しません。

<span id="verify" class="docs-anchor-alias" aria-hidden="true"></span>

## 確認する

途中で停止し、保存時刻付近から再開し、0 から再生します。非表示で自動停止すると仮定せず、ルート再設置後に古い再生やコールバックがないことを確認します。

[公開 Player の定義](https://unpkg.com/@realsee/vreo@2.6.4/lib/Player/index.d.ts) · [Player イベント](https://unpkg.com/@realsee/vreo@2.6.4/lib/typings/VreoUnit.d.ts)