Version: 2.67.0

VR

THEOplayer > VR

VR interface

Inherits from EventDispatcher<VREventMap> . See parent page for inherited properties and methods.

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

Signature:
export interface VR extends EventDispatcher<VREventMap>

Properties

Property

Type

Description

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.

verticalFOV

number

The vertical field of view in VR, in degress.

Remarks


- See [VRConfiguration](/docs/api-reference/theoplayer-vrconfiguration) to configure a source.
- The player utilises the [Canvas API](/docs/api-reference/theoplayer-canvas) internally to render 360° content and is restricted to the same limitations.
- 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](https://bugs.webkit.org/show_bug.cgi?id=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:

Example

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
}
}, '*');
});