Skip to main content

快速上手

创建 Five 实例

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

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

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

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

创建 Player 实例

创建 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/**/**')

// 加载剧本数据
vreoPlayer.load(vreoUnit)

暂停 & 播放

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

// 暂停剧本
vreoPlayer.pause()

// 播放剧本
vreoPlayer.play()

面板控制

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

// 隐藏面板
vreoPlayer.hide()

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

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

事件监听

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

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

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