IntroductionHow to update an SDK?THEOplayer 5.0 - Native Mobile iOS/tvOS and Android SDKs
Getting started on Web (Extended)Getting started with the new Web UIGetting started on WebAPI examplesHow to implement Keyboard HotkeysHow to embed an iframeHow to implement a seamless transition between videos?How can I use video inside THEOplayer?How to work around browser cache with a new license?How to customise quality selection & labels (MP4)How to get frame-accurate currentTime display in the UI Control barHow to play an LCEVC source with THEOplayerHow to use WebXR with THEOplayer
Android legacy (4.12.x)
Getting started on Legacy Android SDK (4.12.x)Legacy Android SDK (4.12.x) customizationHow to couple the native MediaRouteButton to THEOplayerHow to enable -experimental- native rendering on AndroidHow to do offline Playback with AES-128 Encrypted Streams on Android
Getting started with the Android UIGetting started on AndroidAndroid Feature IntegrationsMigration from THEOplayer Android/AndroidTV/FireTV SDK 4.x to THEOplayer Android SDK 5.0
iOS legacy (4.12.x)
Getting started on iOSiOS/tvOS SDK and Legacy iOS/tvOS SDK (4.12.x) CustomizationMy app does not want to build for the app storeHow to bypass copy() not working in Safari consoleHow to couple the native GCKUICastButton to THEOplayeriOS/tvOS SDK and Legacy iOS/tvOS SDK (4.12.x) Touch-events (gestures)Building for iOS Simulator, but the linked and embedded framework THEOplayerSDK.framework was built for iOS + iOS SimulatorHow to implement custom local network access (LNA) interstitial dialog for Chromecast
Getting started guide for THEOplayer iOS/tvOS SDK 5.0THEOplayer iOS/tvOS 5.0 Feature IntegrationsMigration from THEOplayer iOS and tvOS SDK 4.x to THEOplayer iOS/tvOS SDK 5.0
Android TV Legacy (4.12.x)
Getting started on Android TV Legacy (4.12.x)
Getting started on tvOS
Getting started on ChromecastChromecast Application Customization
Getting Started on webOS
Getting started on TizenInstalling the Tizen developer toolsSetting up a Tizen device for debuggingDeploying a test app on a physical Tizen deviceDeploying a test app on a Tizen emulator
Getting Started on Roku
Fire TV Legacy (4.12.x)
Getting started on Fire TV Legacy (4.12.x)

How to use WebXR with THEOplayer

This article will show you how to play a VR source in THEOplayer using WebXR. If you are not familiar with THEOplayer, we strongly recommend reading the getting started documentation for web first.


Web SDK Android SDK iOS SDK tvOS SDK Android TV SDK Chromecast SDK
Yes No No No No No


1. You need THEOplayer version 5.0 or greater.

Older versions of THEOplayer will work with regular VR, but not with WebXR.

2. Your THEOplayer SDK needs to have the vr-webxr feature enabled.

You can quickly check using THEOplayer.features.

3. You will need the WebXR polyfill for platforms that do not have native support.

Notice: The official polyfill has a bug in its rendering. THEOplayer has proposed a fix, but it has not yet merged into the main project. In the meanwhile you can use a patched build from our CDN. We highly recommend you to download this patch, since it will no longer be available when the main polyfill is fixed.

Add the polyfill to your page:

<script src="//cdn.theoplayer.com/webxr/webxr-polyfill-patched.js"></script>

And enable it:

  allowCardboardOnDesktop: true

Add useWebXR to your PlayerConfiguration

The default behavior for THEOplayer is to use regular VR, so make sure to add the following VR configuration to your PlayerConfiguration:

const playerConfig: PlayerConfiguration = {
  // ...
  vr: {
    useWebXR: true

Setting a VR source

You can set the following source to test:

player.source = {
  sources: {
    src: "//demo.theoplayer.com/hubfs/videos/natgeo/playlist.m3u8",
    crossOrigin: "anonymous",
  vr: {
    panoramaMode: "360",
    stereoMode: "none",
  poster: "//demo.theoplayer.com/hubfs/videos/natgeo/poster.jpg",

If everything went well, you should now be using WebXR!

Make sure to follow us on GitHub!
Copyright © 2022. All Rights Reserved.
New York