THEOplayer Web SDK
    Preparing search index...

    Interface VR

    The virtual reality API which allows you to control the display of 360° VR videos.


    - See VRConfiguration to configure a source.
    - The player utilises the Canvas API internally to render 360° content and is restricted to the same limitations.
    - To access devicemotion events on mobile devices, a page needs to be served over https on modern browsers.
    - To access devicemotion events on Safari for iOS 13+ you need to request user permission using the DeviceMotionEvent.requestPermission API
    - iPhone support requires iOS 10: On iOS 9 and lower, iPhone forces HTML5 video to play in fullscreen. As a result, the canvas used by THEOplayer VR will not be visible during playback, since it will be behind the fullscreen video. iPhone users must upgrade to iOS 10 or higher for the full VR experience. Note that iPad is unaffected: VR is supported even on iOS 9 and lower.
    - Cross-origin iframes on iOS: iOS blocks cross-origin iframes from accessing devicemotion events WebKit bug #152299. As a result, when using THEOplayer inside a cross-origin iframe, the player cannot rotate the VR display to align with the device's physical orientation. Fortunately, this can be worked around by listening for devicemotion events on the top frame and forwarding them as messages to the iframe. THEOplayer will automatically handle these messages as if they were native devicemotion events:

    const playerIframe = document.querySelector('iframe');
    window.addEventListener('devicemotion', function (event) {
       playerIframe.contentWindow.postMessage({
           type : 'devicemotion',
           deviceMotionEvent : {
               acceleration : event.acceleration,
               accelerationIncludingGravity : event.accelerationIncludingGravity,
               interval : event.interval,
               rotationRate : event.rotationRate,
               timeStamp : event.timeStamp
           }
       }, '*');
    });
    interface VR {
        canPresentVR: boolean;
        direction: VRDirection;
        state: VRState;
        stereo: boolean;
        useDeviceMotionControls: boolean;
        verticalFOV: number;
        addEventListener<TType extends keyof VREventMap>(
            type: TType | readonly TType[],
            listener: EventListener<VREventMap[TType]>,
        ): void;
        removeEventListener<TType extends keyof VREventMap>(
            type: TType | readonly TType[],
            listener: EventListener<VREventMap[TType]>,
        ): void;
    }

    Hierarchy (View Summary)

    Index

    Properties

    canPresentVR direction state stereo useDeviceMotionControls verticalFOV

    Methods

    addEventListener removeEventListener

    Properties

    canPresentVR: boolean

    Whether the player can present in VR mode.

    direction: VRDirection

    The viewing direction.

    state: VRState

    The state of the VR feature.

    stereo: boolean

    Whether stereo mode is enabled.


    - Setting it to true renders the video in VR.

    false

    useDeviceMotionControls: boolean

    Whether controls using device motion on mobile devices is enabled when not viewing in stereo mode.


    - This performs actions that require user consent, so setting this to true has to be behind a button press.
    - Changes only take effect when stereo is false.

    false

    verticalFOV: number

    The vertical field of view in VR, in degress.


    - It should be a number in the range of [0, 180].

    72

    Methods

    Settings

    Member Visibility

    On This Page

    Properties
    Methods