tencent cloud


VR Playback Plugin (TCPlayerVRPlugin)

Last updated: 2024-04-11 16:18:08
    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

    Default Value
    Enable VR Controller
    Allow Image Scaling
    Initialize left and right viewing angles, in degrees
    Initialize vertical viewing angles, in degrees
    Initialize the field of view, in degrees
    Limit the range of view movement
    [-180, 180]
    Limit the range of view movement
    [-90, 90]
    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'.

    - 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.
    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.
    Contact Us

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

    Technical Support

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

    7x24 Phone Support