VR 播放插件（TCPlayerVRPlugin）

Recent Pages

VR 播放插件（TCPlayerVRPlugin）

最后更新时间：2024-04-11 16:18:08

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 > 动作与方向访问，开启传感器后刷新页面，即可打开。
示例
单击 此处 可参考示例。

联系我们

联系我们，为您的业务提供专属服务。

技术支持

如果你想寻求进一步的帮助，通过工单与我们进行联络。我们提供7x24的工单服务。

7x24 电话支持

tencent cloud

Recent Pages

VR 播放插件（TCPlayerVRPlugin）

使用条件

接入方式

VR 插件属性说明

VR 插件方法说明

- lookAt

- setGyroMode

- enableSensor

示例

本页内容是否解决了您的问题？

本页内容是否解决了您的问题？

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

tencent cloud

注册

登录

Recent Pages

VR 播放插件（TCPlayerVRPlugin）

使用条件

接入方式

VR 插件属性说明

VR 插件方法说明

- lookAt

- setGyroMode

- enableSensor

示例

本页内容是否解决了您的问题？

本页内容是否解决了您的问题？