tencent cloud

All product documents
Video on Demand
DocumentationVideo on DemandPlayer SDKAdvanced FeaturesWeb Advanced FeaturesVR Playback Plugin (TCPlayerVRPlugin)
VR Playback Plugin (TCPlayerVRPlugin)
Download PDF
Last updated: 2024-04-11 16:18:08
VR Playback Plugin (TCPlayerVRPlugin)
Last updated: 2024-04-11 16:18:08
Download PDF
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.
VR playback requires access to Player Premium Version License（Web） for use.

Connection Method

For the player initialization process, see TCPlayer Integration Guide and API Documentation.
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', { // player-container-id is the player's container ID, which must match the one in HTML
  plugins: {
    VR: {
      isEnableController: true,
      ...
    },
  }
});

VR Plugin Property Description

Name
Description
Default Value
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.
Was this page helpful?
You can also Contact Sales or Submit a Ticket for help.
Yes
No

Feedback

Contact Us

Contact our sales team or business advisors to help your business.

Contact Us
Technical Support

Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

Submit a Ticket
7x24 Phone Support
Hong Kong, China
+852 800 906 020 (Toll Free)
United States
+1 844 606 0804 (Toll Free)
United Kingdom
+44 808 196 4551 (Toll Free)
Canada
+1 888 605 7930 (Toll Free)
Australia
+61 1300 986 386 (Toll Free)
EdgeOne hotline
+852 300 80699
More local hotlines coming soon