文档中心>播放器 SDK>高级功能>Web 高级功能>VR 播放插件(TCPlayerVRPlugin)

VR 播放插件(TCPlayerVRPlugin)

最近更新时间:2024-04-01 20:55:21

我的收藏
TCPlayerVRPlugin 插件可用于 VR 全景视频播放,播放中可以通过陀螺仪转动或手势操作来改变视角,提供多种属性和方法来控制播放表现,支持 PC 端和移动端。

使用条件

目前 Web 播放器 SDK 5.0.0 以上版本支持使用 VR 播放插件。
VR 播放需获取 Web 端播放器高级版 License 方可使用。

接入方式

播放器初始化过程参见 TCPlayer 集成指引API 文档
初始化播放器实例时,可通过声明 plugins 插件的方法开启 VR 播放能力,开启后播放器会自动加载并使用本插件:
const player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID,必须与html中一致
plugins: {
VR: {
isEnableController: true,
...
},
}
});

VR 插件属性说明

名称
说明
默认值
isEnableController
是否打开 VR 控制器
true
isEnableZoom
是否允许画面缩放
true
yaw
初始化左右视角角度,单位为度
0
pitch
初始化上下视角角度,单位为度
0
fov
初始化可视视角,单位为度
65
yawRange
限制视角活动的范围
[-180, 180]
pitchRange
限制视角活动的范围
[-90, 90]
fovRange
限制视角活动的范围
[30, 110]

VR 插件方法说明

VR 插件初始化后,会生成实例,实例化之后会进入 VR 模式播放视频,可以在播放器实例上找到 VR 实例,通过 VR 实例可以调用相关方法:

- lookAt

在一段时间通过动画形式移动到特定角度的视角。
player.plugins['VR'].lookAt({ yaw: 30 }, 1000);

- setGyroMode

如果您的设备拥有运动传感器(陀螺仪、加速传感器),您可以通过设备的运动来改变视角,这个方法可取值为 'VR' | 'none' | 'yawPitch'
player.plugins['VR'].setGyroMode('none');


- enableSensor

获取使用运动传感器的权限。一般在 Android 设备,默认会开启运动传感器,在 iOS 13+,则需要触发人机交互手动获取权限。
player.plugins['VR'].enableSensor();
说明:
1. 在浏览器劫持播放的环境,无法支持 VR 视频的播放。
2. Android 端播放器初始化后会默认进入 VR 模式,并开启陀螺仪。
3. iOS 端根据系统版本不同,表现会有差异:
3.1 系统版本13+,需要手动点击页面,触发人机交互并获取权限后,才能打开陀螺仪。
3.2 系统版本12.2 - 13,需进入系统设置手动开启运动传感器。通常来说开启路径一般为设置 > Safari > 动作与方向访问,开启传感器后刷新页面,即可打开。

示例

单击 此处 可参考示例。