The TCPlayerVRPlugin can be used for VR panoramic video playback. During playback, you can change the viewing angle through gyroscope rotation or gesture operations. It offers various properties and methods to control playback performance and supports both PC and mobile platforms.
Use Conditions
Currently, the Web Player SDK version 5.0.0 and above support the use of the VR playback plugin.
Connection Method
When initializing the player instance, you can enable VR playback by claiming plugins. Once enabled, the player will automatically load and use this plugin:
const player = TCPlayer('player-container-id', {
plugins: {
VR: {
isEnableController: true,
...
},
}
});
VR Plugin Property Description
|
isEnableController | Enable VR Controller | true |
isEnableZoom | Allow Image Scaling | true |
yaw | Initialize left and right viewing angles, in degrees | 0 |
pitch | Initialize vertical viewing angles, in degrees | 0 |
fov | Initialize the field of view, in degrees | 65 |
yawRange | Limit the range of view movement | [-180, 180] |
pitchRange | Limit the range of view movement | [-90, 90] |
fovRange | Limit the range of view movement | [30, 110] |
VR Plugin Method Description
After the VR plugin is initialized, it generates an instance. After instantiation, it enters the VR pattern to play videos. The VR instance can be found on the player instance, and related methods can be called through the VR instance:
- lookAt
Move to a specific angle of view through animation over a period of time.
player.plugins['VR'].lookAt({ yaw: 30 }, 1000);
- setGyroMode
If your device has motion sensors (gyroscope, accelerometer), you can change the viewing angle through the device's motion. This method can be set to 'VR' | 'none' | 'yawPitch'.
player.plugins['VR'].setGyroMode('none');
- enableSensor
Access permission to use motion sensors. Typically, on Android devices, motion sensors are enabled by default, while on iOS 13+, manual access permission is required through user interaction.
player.plugins['VR'].enableSensor();
Note:
1. In a browser hijacking environment, it is impossible to support the playback of VR videos.
2. After initialization, the Android player will default to the VR pattern and activate the gyroscope.
3. On the iOS side, performance may vary depending on the system version:
3.1 For system versions 13+, you need to manually click on the page to trigger user interaction and access permissions before the gyroscope can be activated.
3.2 For system versions 12.2 to 13, you need to go into the system Settings to manually enable the motion sensor. The usual path to do this is Settings > Safari > Motion & Orientation Access. After enabling the sensor, refresh the page to activate it.
Sample code
Click here to see the sample code.