tencent cloud

PrevNext

Feedback

search by keyword

Recent Pages

Documentation
Video on Demand
    Documentation
    Download PDF

    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.
      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
      Copyright © 2013-2024 Tencent Cloud. All Rights Reserved.
      Privacy PolicyLegalCookie Policy