TCPlayerVRPlugin 插件可用于 VR 全景视频播放,播放中可以通过陀螺仪转动或手势操作来改变视角,提供多种属性和方法来控制播放表现,支持 PC 端和移动端。
使用条件
目前 Web 播放器 SDK 5.0.0 以上版本支持使用 VR 播放插件。
VR 播放需获取 Web 端播放器高级版 License 方可使用。
接入方式
初始化播放器实例时,可通过声明 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 > 动作与方向访问,开启传感器后刷新页面,即可打开。
示例