快速上手

创建 Five 实例

在使用播放器前，您需要先创建一个三维空间，即 Five 实例:

import * as React from "react";
import { Five } from "@realsee/five";

const five = new Five({
  /* Five 配置项 */
});

提示

您可以前往 如视三维空间快速实践文档 了解 Five 实例的创建与使用。

创建 Player 实例时，需要将前一步创建的 Five 实例作为初始化参数传入构造函数 Player 。

import { Player } from "@realsee/vreo";

const vreoPlayer = new Player(five); // 其中 five 为上一步创建的 five 实例

当然，您还需要引入 default 样式到自己的项目中，否则一些 UI 效果无法正确展示：

@import "@realsee/vreo/stylesheets/default.css";

通过 load 方法，为播放器载入剧本数据：

// 异步请求剧本数据
const vreoUnit = await fetch("api/**/**");

// 加载剧本数据
// highlight-start
vreoPlayer.load(vreoUnit);
// highlight-end

默认情况下，数据载入完成后就会自动播放。您可以通过 pause() 方法暂停播放，也可以通过 play() 方法继续播放：

// 暂停剧本
vreoPlayer.pause();

// 播放剧本
vreoPlayer.play();

Vreo 会自带一个底部面板，题词弹幕、数字人形象等都在这个面板展示，你可以通过 show()、hide() 方法来控制面板：

// 隐藏面板
vreoPlayer.hide();

// 展示面板
vreoPlayer.show();

提示

至此，您已经上手使用 Vreo 播放器最核心的几个功能。

您可以通过 on() 方法，对相关事件进行监听。

// 监听播放事件
vreoPlayer.on("playing", callback);

// 监听暂停事件
vreoPlayer.on("paused", callback);