Best VR Headsets 2017/2018
Virtual reality is here to stay
Virtual reality (VR) invites you to explore alternative worlds as if you’re actually there. Simply take your smartphone and a headset and discover virtual spaces, games, and much more. Even though the technology has been around for years, the current generation of products and devices gets closer than ever to the VR’s original promise: getting elsewhere and connecting to whatever matters most to you.
With the technology advancing every year, the hardware is getting cheaper and the software base is growing steadily. In other words, virtual reality becomes affordable and thanks to massive price drops and discounts on hardware and software bundles, now is the perfect time to get your own VR headset and discover what all the hype is about.
Desktop VR versus Mobile VR
When taking a look at the vast variety of devices, you should know there are two main categories: tethered and mobile headsets. The former is connected to either a computer or a gaming console and delivers the most powerful VR experience. External tracking devices, cameras, and advanced controllers allow for high-end experiences and get the most out of what’s currently possible in VR. However, these headsets are pricey, and with all the cables and additional trackers, movement can be inconvenient and some free space is needed. On the other hand, there are mobile headsets, which are basically empty shells with two optical lenses where the smartphone can be plugged in. Motion tracking is either done by the smartphone’s sensors or built-in headset sensors; thus, there are no cables hindering free movement. The great thing is, one can start for as cheap as five bucks with the simplest headset from Google (Cardboard). The flipside, however, is the limited computing power, resulting in a reduced experience in terms of visual quality and VR possibilities. Ultimately, you get what you pay for. Anyway, we sat down and discussed which 2017 device gets the most bang for the buck – this article is intended to make the market a bit more transparent.
Don’t be limited. In 2018, all-new stand-alone devices are coming, and upgrades to the current generation will be released. Check out our article for what comes next.
Click on any VR Headset to learn more
| HTC Vive | Oculus Rift | PSVR | Samsung Gear VR | Google Daydream View | Zeiss VR ONE Plus | Google Cardboard | |
| Panel/Display i | OLED | OLED | OLED | OLED | OLED | – | – |
| Resolution (combined) i | 2160×1200 | 2160×1200 | 1920×1080 | 2560×1440 | 2560×1440 | depends on smartphone | depends on smartphone |
| Field of view i | 110° | 110° | 100° | 100° | 100° | 100° | 90° |
| Refresh rate i | 90 Hz | 90 Hz | 90-120 Hz | 90 Hz | 90 Hz | depends on smartphone | depends on smartphone |
| Positional Tracking i | yes | yes | yes | Not supported | no | Not supported | Not supported |
| Motion Controller | Vive Controller | Oculus Touch | PlayStation Move | Gear VR Controller | Daydream Controller | Not supported | Not supported |
| Host device | (Gaming) PC | (Gaming) PC | PlayStation 4 | Samsung Smartphone | List of supported Android Phones | Apple and Samsung Smartphones | VR ready smartphones |
| Software platform | Steam | Oculus Home | PlayStation | Oculus Home | Daydream VR | Google Play / iOS Appstore | Google Play / iOS Appstore |
| Release date | April 2016 | March 2016 | October 2016 | November 2015 | November 2016 | June 2016 | June 2014 |
| Weight (Headset) | 555 gr | 470 gr | 610 gr | 280 gr (without smartphone) | 220 gr | 350 gr | < 90 gr |
| Price (Updated January 2018) | $599.00 | $399.00 | $330.70 | $129.99 | $99.00 | $49.99 | $15.00 |
Desktop VR Headsets
HTC Vive
| Panel/Display | OLED |
| Resolution (combined) | 2160×1200 |
| Field of view | 110° |
| Refresh rate | 90 Hz |
| Positional Tracking | yes |
| Motion Controller | Vive Controller |
| Host device | (Gaming) PC |
| Software platform | Steam |
| Release date | April 2016 |
| Weight (Headset) | 555 gr |
The HTC Vive, produced by HTC and developed together with video game industry giant Valve, was released on April 5th, 2016. It comes packed with a pair of motion-tracking controllers and two room-scale sensors. The wireless Base Stations allow creating a 3 x 4 meter dedicated play area where one can physically walk around. Assuming there is enough free space, security features will make sure that the furniture does not get hit. The headset features two AMOLED 3.6” diagonal screens each with 1080×1200 pixel resolution, a 90 Hz refresh rate, and a 110-degree field of view.
While the price tag dropped during the Black Friday sales, it is still at 699€ in Europe (US $600) and requires at least some decent PC hardware to perform smoothly. HTC demands a minimum of an Intel i5-4590 or AMD FX 8350 CPU paired with either an AMD R9 290 or a Nvidia gtx 970 graphics card. These specifications make additional hardware purchases necessary for those who do not own a powerful gaming PC. Fortunately, the PC can be tested for compatibility before the purchase via a SteamVR Performance Test application or HTCs ViveCheck tool.
VR Accessories
Thanks to some great third-party accessories, like the TPCAST wireless adapter, the Vive can now be used without annoying cables. The VR Lens Lab enables the user to install prescription lenses in order to operate the Vive without glasses. Moreover, Leap Motion, a device that can be attached to the Vive’s front, has the ability to accurately track your hands with VR applications. In addition, HTC released the Deluxe Audio Strap and the Tracker, allowing for more wearing comfort and tracking in the room of any device attached to the Tracker (e.g., tennis bat, toy gun). This feature further enhances the entire Vive experience.
With an ever growing software base on Valve’s distribution platform STEAM and HTC’s own Viveport games subscription service (7,99€/month), there is already plenty to explore in VR. Thanks to LibreVR/Revive project, Vive users can also play some of the Oculus Rift exclusive titles. Since the release in 2016, the Vive has matured with all its available add-ons, and it’s for sure one of the best VR experiences consumers can currently get. However, the downside is still the high price, the additional requirement of a powerful PC, and if users aren’t willing to pay extra for the wireless solution, they have to accept less comfortable movement because of the headset’s wiring.
To sum up, the HTC Vive offers the most you can get out of VR at the moment but has a high price tag and needs some of the available add-ons to enjoy the full experience. Buy it if you’re a VR enthusiast for whom price is no object.
Oculus Rift
| Panel/Display | OLED |
| Resolution (combined) | 2160×1200 |
| Field of view | 110° |
| Refresh rate | 90 Hz |
| Positional Tracking | yes |
| Motion Controller | Oculus Touch |
| Host device | (Gaming) PC |
| Software platform | Oculus Home |
| Release date | March 2016 |
| Weight (Headset) | 470 gr |
The Oculus Rift is widely considered to be the origin of the new VR hype and began as a successful Kickstarter campaign in 2012. Two years later, Facebook acquired the company and finally released the consumer version in March 2016. The Rift includes two Oculus Touch controllers and two room-scale sensors for a recommended 3×3 meters physical space. Oculus suggests improving the room tracking quality by purchasing a third sensor that can be easily integrated into the current set-up. The installed displays are comparable to the HTC Vive, using the same 1080×1200 resolution per eye (2160×1200 combined), with a 90-Hz refresh rate. The 110° field of view is similar to the Vive’s.
The integrated Rift headphones set the headset apart from the Vive, for which the audio strap (~100€) has to be purchased separately. The Oculus Rift has benefited from recent sales and is now available for 419€ (US $379). While it is noticeably cheaper than the Vive, the hardware requirements for the PC that powers the headset are basically the same: Oculus recommends 8GB RAM, a GTX 960/R9 290 GPU, and an Intel i3 6100/AMD FX 4350 CPU as a minimum configuration. Similarly to ViveCheck, there is an Oculus tool for checking the existing computer hardware.
VR Accessories
Both accessories, the leap motion hand tracker, and the TPCast wireless adapter, are available for the Rift, too. Furthermore, there is plenty of general VR equipment that can, assuming one is willing to pay for it, enhance the VR experience, for example, the Kor-FX that offers a gaming vest with a haptic feedback system, adding an additional layer of immersion; the 3dRudder Foot Controller that makes movement in VR feel more natural or VirZoom’s Bike Controller that turns your VR set-up into a workout experience.
The main source for VR games and apps is called Oculus Home, and it includes a few games that previously could be played exclusively on the Rift. Lately, native stream integration and updates of the central hub made the navigation and handling much more convenient. As with the Vive, the Oculus Rift matured over time and despite minor differences in the perceived controller and tracking quality, both systems offer a pretty similar experience.
Considering the lower price tag of the Oculus Rift compared to the Vive, it is a very compelling compromise between money spent and high-end VR experience. The saved money could be spent on the wireless adapter or potent PC hardware. Buy it if you want the best price for VR state-of-the-art.
Playstation VR
| Panel/Display | OLED |
| Resolution (combined) | 1920×1080 |
| Field of view | 100° |
| Refresh rate | 90-120 Hz |
| Positional Tracking | yes |
| Motion Controller | PlayStation Move |
| Host device | PlayStation 4 |
| Software platform | PlayStation |
| Release date | October 2016 |
| Weight (Headset) | 610 gr |
The PlayStation VR (short: PSVR), formerly known under the codename Project Morpheus, was released in October 2016 by Sony Interactive Entertainment. As the name suggests, the headset is designed to work with Sony’s PlayStation 4 and PlayStation 4 Pro video game consoles. It uses a 5,7″ OLED display with a resolution of 960 × 1080 pixels per eye, featuring a 100° field of view and 90-120 Hz refresh rate. In order to work properly, the PSVR requires a PlayStation 4 console and the PlayStation camera for positional tracking.
The PSVR includes a microphone for social experiences and offers 3D sound via a headphone jack, but the headphones are not included. In October 2017, Sony released a slightly upgraded version of the headset with installed headphones, a thinner connection cable to the console, and an upgraded HDR-capable processing unit. Unfortunately, this version is currently exclusive to the Japanese market. Over here, the headset can be purchased bundled with the camera (but without the PlayStation Move controllers) and certain games for less than 400€ (USD $349). Considering the PlayStation 4’s price is below 300€, the Sony VR experience is the most cost-effective tethered solution. Therefore, it is no wonder that PSVR outsold both the HTC Vive and the Oculus Rift.
Even though the PlayStation 4 lacks computing power, compared to modern gaming PCs, the PSVR is able to deliver reliable tracking and a responsive and smooth gaming experience. Sony claims to offer over 100 VR-compatible games and applications, including music and movie streaming services. The only small downside is that most bundles exclude the PlayStation Move controllers (100€) and the Aim controller (90€) for shooting games. Adding those useful accessories so that players can enjoy the whole PSVR experience puts the PSVR closer to competitor Oculus Rift in terms of price.
In conclusion, the PSVR offers a high-quality experience at a considerably lower price tag compared to the HTC Vive and Oculus Rift. Yet, if starting from scratch, buying the PlayStation 4, a PSVR bundle, and additional controllers aren’t exactly cheap.
Mobile VR Headsets
Gear VR
| Panel/Display | OLED |
| Resolution (combined) | 2560×1440 |
| Field of view | 100° |
| Refresh rate | 90 Hz |
| Positional Tracking | Not supported |
| Motion Controller | Gear VR Controller |
| Host device | Samsung Smartphone |
| Software platform | Oculus Home |
| Release date | November 2015 |
| Weight (Headset) | 280 gr (without smartphone) |
The initial consumer version of the Gear VR was released in November 2015, for the Galaxy S6 generation of Samsung’s top smartphones. Since then, alongside every new generation of top smartphones (Galaxy and Note series), a new version of the VR goggles has been released. The newest versions (SM-R324, SM-R325) include the Gear VR Controller, a Bluetooth motion tracking device that adds a new layer to both menu navigation and game controls. The controller is downwards compatible and works with older headset versions, too. The Gear VR bundle is available for around 100€, and sometimes, it is included at no additional cost in pre-orders of new Samsung phones or through related promotional events. Nevertheless, when adding the retail price of the smartphone, the Gear VR price tag comes close to the HTC Vive.
Samsung partnered with Oculus to offer a rich software ecosystem for the Gear VR. In addition to Samsung’s own VR browser and gallery app, the Oculus Home platform can be used to access applications, games, and 360° video content. It is worth mentioning that some Oculus Rift games are also available for the Gear VR, making the VR experience on the Gear VR outstandingly unique. For the price, it is the closest you can get to a high-end VR experience. However, the computing power of even the newest smartphones is limited, especially compared to tethered headsets, and players’ visual expectations shouldn’t be set too high.
Sadly, the Gear VR is only compatible with Samsung’s top smartphones. However, more than five million headsets have been sold, and the well-thought-out Oculus Home integration guarantees a quality experience that cannot be matched in this pricing segment.
Google Daydream
| Panel/Display | OLED |
| Resolution (combined) | 2560×1440 |
| Field of view | 100° |
| Refresh rate | 90 Hz |
| Positional Tracking | no |
| Motion Controller | Daydream Controller |
| Host device | List of supported Android Phones |
| Software platform | Daydream VR |
| Release date | November 2016 |
| Weight (Headset) | 220 gr |
The Google Daydream View was released in November 2016 and was recently (October 2017) succeeded by a slightly improved but more expensive version. It comes with a motion tracking Bluetooth controller and works similarly to the Google Cardboard or Gear VR. After the setup process, which involves installing the Daydream app from the store and following the instructions, the smartphone can be inserted into the headset. Unlike the Gear VR, the Daydream View supports multiple smartphones with the headset, including select models from ZTE, Huawei, Samsung, Motorola, Asus, LG and, of course, Google’s own Pixel/Pixel 2 series.
The menu and store connection features are comparable to Oculus Home but feel less extensive in terms of the available apps and games. However, there is a lot of content to be explored and, thanks to the fabric design, the headset’s look is less tech-nerdy and more comfortable than the Cardboard and the Gear VR. For the owner of a supported smartphone from the list, the Daydream View is a valid alternative to Samsung’s Gear VR.
Zeiss VR One
| Panel/Display | – |
| Resolution (combined) | depends on smartphone |
| Field of view | 100° |
| Refresh rate | depends on smartphone |
| Positional Tracking | Not supported |
| Motion Controller | Not supported |
| Host device | Apple and Samsung Smartphones |
| Software platform | Google Play / iOS Appstore |
| Release date | June 2016 |
| Weight (Headset) | 350 gr |
The Zeiss VR ONE Plus, the successor to the VR ONE, was released in June 2016 by German optics and camera lens manufacturer Zeiss. It features a tray for ideal positioning of the smartphone and a translucent plastic front panel, allowing users to utilize the smartphone camera for AR purposes. Luckily, the headset has now a universal tray that holds any smartphone with a display size between 4,7 and 5,5 inches; the older model needed a specific tray depending on the type and size of the smartphone. The VR ONE Plus includes high-quality but non-adjustable lenses and offers comfortable handling. Unlike the Daydream View or Gear VR, there is no controller or touch panel for navigation included. The price tag dropped and is now about 50€.
Zeiss provides a few apps, especially for their VR headset on both iOS and Android. Unfortunately, these are tech demos at best, since they add little value and feel unpolished. However, all the standard VR apps available in their respective stores can be used and allow, due to the quality lenses, a good VR experience. In conclusion, the VR ONE Plus is manufactured very well but lacks dedicated high-quality content and a controller device. It might be the choice for smartphones that are not supported by Daydream View or Gear VR.
Google Cardboard
| Panel/Display | – |
| Resolution (combined) | depends on smartphone |
| Field of view | 90° |
| Refresh rate | depends on smartphone |
| Positional Tracking | Not supported |
| Motion Controller | Not supported |
| Host device | VR ready smartphones |
| Software platform | Google Play / iOS Appstore |
| Release date | June 2014 |
| Weight (Headset) | < 90 gr |
The Google Cardboard headset, which is literally made of cardboard, was released in June 2014. It is the perfect entry into VR since it’s super cheap and compatible with almost any device. There are dozens of different versions, e.g. do-it-yourself manuals, and free promotional gifts, with and without a head strap but always featuring a pair of simple plastic lenses. There is no controller, no buttons and often, not even a head strap. Consequently, the wear comfort is low, especially over time. However, the headset is sufficient for testing simple VR apps (e.g. watching YouTube in VR) or games and getting an idea of the technology. To sum up, it is the best headset for curious people or for use during promotional events to take the first step into the VR sphere.
Introducing Spatial Audio
Introducing - Spatial Audio
Published on: Jan 20, 2017
Spatial Audio.
Surrounded by Sound.
Delight VR Video just got more immersive with the addition of our Spatial Audio feature! You and your customers are now able to locate every sound within your spatial audio enabled productions.
What is Ambisonics?
Ambisonics is a different way of encoding sound in an orientation independent manner. This is achieved by transforming sound into a different basis function and storing the parameters of said basis functions in one channel resp. The higher-order the function is the more precision can be represented in the signal but the more channels will be used. First order ambisonics are currently a good fit since they produce 4 channels of parameters for the basis and thus fit inside a single 5.1 stream. Second order ambisonics would require 8 channels and thus could fit in 7.1. As soon as the standards improve on storing ambisonics data, Delight VR will strive to support even higher order streams.
Introducing Adaptive Streaming
Introducing - Adaptive Streaming
Published on: Jan 10, 2017
Adaptive Streaming
With the newest release of Delight VR one of the most requested features is now available: Adaptive Streaming. With adaptive streaming your users will always enjoy a fast startup time and high-quality video playback according to their available bandwidth. Similarly you can save CDN bandwidth and thus cost by only transferring those video segments that are actually played back on the user’s side.
Delight VR supports both most used adaptive streaming protocols, MPEG-DASH and HLS for maximum compatibility and integrability into your existing workflow. As of now you can use MPEG-DASH and HLS sources for 2D, 3D, 360° Video and 180° Video monoscopic and stereoscopic formats using our <dl8-video> element. Additionally you can display MPEG-DASH and HLS streams within our virtual cinema environment.
Adaptive Streaming is at the core of any fast and reliable video delivery solution in the Web: Users want to experience fast startup times of videos and want to always experience the best quality that can be delivered given their bandwidth requirements. This is where Adaptive Streaming shines. In contrast to progressive video the seeking times also rapidly decrease as the video is segmented into smaller chunks that can be efficiently selected for decoding and result in less wasted decoding overhead when seeking.
From a content delivery standpoint, both DASH and HLS provide the most future proof technologies in terms of possible quality output from one source and minimizing overall outgoing bandwidth and thus costs on your CDN. It is also the stepping stone in any content-delivery architecture towards live-streaming and new advanced features we’ll be showcasing soon, e.g. foveated streaming for high-quality next-level VR video content delivery.
Related features coming soon
- Encoding Service
Providing a performant encoding pipeline and reliable delivery for HLS and DASH compatible streams can be a daunting task. That’s why we will offer an encoding service that does the heavy lifting for you. With a simple dashboard and a programmable API it will integrate in all workflow needs you might have.
- Live streaming
Live streaming is the next market for VR video delivery. Switching to Delight VR Adaptive Streaming right now, leaves you prepared for the next big thing in VR as the technologies are the technical prerequisite for VR live streaming.
- Foveated Streaming
VR Video is sometimes bemoaned due to its perceived “low quality”. This is due to the fact that 360° (or 180°) of video (possibly stereoscopic) have to be compressed into a single HD or 4k video stream. Foveated streaming approaches solve this problem by providing high-quality streams at those regions of the user’s field of view, where it is most required: The so called fovea region. This means higher quality content, can be streamed at roughly the same bandwidth requirements as with a normal pipeline. Delight VR’s aforementioned Encoding Service will be providing support for a high-quality foveated rendering approach. DASH and HLS Adaptive Streaming protocols are the gateway to becoming compatible to the future of high-quality next-level VR Video streaming.
Delight VR Official Launch
Delight VR Official Launch
Published on: Oct 6, 2016
Delight VR officially launched today. Free to use and with incredible features.
Thank you!
Delight VR has been in Beta for around 5 months. During this time we had the opportunity to tackle many real-world challenges brought to us by our beta testing clients and of course the chance to learn a lot about todays Virtual Reality market.
Supporting a multitude of platforms and HMDs, solving numerous customer requests and learning from all your valuable feedback allowed us to shape the v1.0 release version of Delight VR immensely.
That’s why we want to say: Thank you for all your support and patience.
"Seeing our Delight VR customer and user base grow this fast tells me, that we're doing the right thing. I love what people build with our technology."
"Seeing our Delight VR customer and user base grow this fast tells me, that we're doing the right thing. I love what people build with our technology."
Dr. Andreas Wilhelm, Co-Founder & CEO of Delight VR
"We believe in the freedom of content creators and want to enable everyone to be a part of the VR movement. That's why we decided to let everybody use Delight VR for free!"
"We believe in the freedom of content creators and want to enable everyone to be a part of the VR movement. That's why we decided to let everybody use Delight VR for free!"
Frederik Maucksch, Co-Founder & CTO of Delight VR
Delight VR is free to use.
Virtual Reality is a new and emerging technology as well as market. For it to grow and reach it’s full potential creators and content publishers need a stable base to build upon. Therefore we’ve decided to make Delight VR free to use and accessible for everyone: personal, small business and enterprise. By signing up to our services you’ll get access to all basic features of the Delight VR Solutions.
If you need help with the integration of Delight VR we are also offering additional Services like our Professional Support Plans or custom project realizations.
A lot of amazing features ... coming soon!
Already more than 8 million videos are watched every month using Delight VR.
But this is only the beginning. Within the next weeks we’re going to extend our product by a lot of amazing features such as spatial audio, the content hub, VR analytics, the Delight VR Mobile SDK, content hosting, encoding, a live streaming solution and more.
Stay tuned!
"I'm really excited about all the great features we're currently working on. Some will really blow your mind."
"I'm really excited about all the great features we're currently working on. Some will really blow your mind."
Matthias Wolff, Co-Founder & Lead Developer of Delight VR
Changelog
Delight VR Changelog
1.4.11 (2018-07-18) [latest]
- Fixed a rare case where user was redirect to cors-fallback-url when an error in the system occurred
- Fixed a rare misclassification where some phones got classified as a tablet and thus were unable to enter VR mode
- Fixed HLS crossorigin use-credentials handling to correctly handle cases where crossorigin=”use-credentials” flag is being used for HLS videos
- Fixed an issue where the body background color was not reset correctly after entering and leaving VR again
1.4.10 (2018-07-10)
- Add updateDimensions() to element API to trigger embed size recalculation. This is useful when visibility of the element changes and the player should update the dimensions according to the new DOM state
- Add tag filtering support to <dl8-hub>
- Allow disabling of player autostart when being redirected to the cors fallback url with the “cors-fallback-no-autostart” attribute
- Fix hud button positioning when certain elements like controls or title are force hidden
- Fix autostart-vr bug when autostarting WebVR or autostarting fullscreen mode is not possible due to user gesture constraints
- Add “dl8-customization-force-native-vr-resolution” meta tag to force 1:1 resolution of the device instead of the default optimized resolution for Android devices
- Reduce hover scaling of <dl8-tour> elements
- Fix pause and play indicators erroneously appearing in non-video elements
1.4.8 (2018-06-06)
- play 2D videos without following cors fallback url
- disable redirection to cors-fallback-url on iOS >= 11.1
- save video quality selection across sites
- fix duplication of qualities in quality dropdown
- fix issue caused by very large preview thumbnail sprite sheets
- add ‘autostart’ attribute to automatically start a content element (including a ‘tap-to-unmute’ hint to support common video autoplay behavior)
- add ‘disable-tap-to-unmute’ option to disable the automatic muting of videos when autostart attribute is present
- add ‘autostart-vr’ attribute to launch directly into VR mode
- add option to disable capturing of scroll events (‘disable-scroll-capture’)
- add option to disable capturing of touch events (‘disable-touch-capture’)
- add option to disable capturing of mouse events (‘disable-mouse-capture’)
- add option to disable vertical dragging on mobile (‘disable-vertical-touch-dragging’)
- add option to disable vertical dragging on desktop (‘disable-vertical-mouse-dragging’)
- add option to disable the 3D HUD for controlling videos in VR (‘disable-3d-hud’)
- add meta tag to skip the VR wizard (<meta name=”dl8-customization-skip-vr-wizard”>)
- add ‘autoplay’ attribute to <dl8-recommendation> sub-element to support automatically playing the first recommendation when the video has ended
- add ‘hidden’ attribute to <dl8-recommendation> sub-element to hide the recommendation UI
- add <dl8-tour-content-portal> sub-element which behaves like the <dl8-tour-portal> but can activate another content instead of jumping to another tour image
1.4.7 (2018-05-14)
- Add Oculus Go controller support
- Improve DASH playback
1.4.6 (2018-05-02)
- Fix magic window mode for Chrome Android > 60 with enabled WebVR API
- Fix regression where recommendations where sometimes not removed correctly when hopping between recommendations
- Fix HLS quality selection of sources bigger than 1080p on IE11
- Fix dynamic DOM deletion of dl8 elements
1.4.5 (2018-04-06)
- Fix HLS and DASH quality selection
- Fix rare issue with adaptive streaming playback when switching between different Delight VR contents
- Improve video frame update interval to fix irregular video frames in certain situations
1.4.0 (2018-03-16)
- Add numerous freely configurable banner ad spots
- Add ability to switch qualities for adaptive video streams (HLS / DASH)
- Add ‘drag-controls-damping’ parameter to common API to control the damping speed of the drag controls
- Add more customization options to tour portals
- Add tour info hotspots
- Add Hear360 8Ball audio format support
- Add new phone from late 2017 and early 2018 to the VR wizard
- Add new VR headsets to the VR wizard
- Enable spatial audio for Firefox Mac and Firefox Android
- Improve visibility of center HUD elements on mobile
- Fix device motion calculation for Chrome >= 66 and Firefox >= 54
- Fix native WebVR path in Chrome for Android
- Prevent fallback to native 2D video when there is a content error
- Prevent showing VR hud on mounted device events when VR is not active
1.3.11 (2017-11-29)
- Use referrer url for redirection to mobile site via QR code when on a cors fallback URL
- Fix redirect to iframe on mobile when enabled via meta tag
1.3.10 (2017-11-08)
- Add iPhone X to phone library
- Add currentTime and duration getter to <dl8-video> element
1.3.9 (2017-10-30)
- Fix start-lat and start-lon for <dl8-img>
- Fix iOS 9 video playback issue
- Fix iOS 10/11 wakelock problem for looping videos
- Add .seek() API for <dl8-video>
- Add loading events to get insights into resource loading flow
- Add new customization options for fine grain visibility control of on-screen UI
1.3.8 (2017-10-12)
- Fix cubemap slice unpacking for non square cubemap sides.
- Add iPhone 8 and iPhone 8 Plus to VR Wizard
1.3.7 (2017-09-20)
- Use canvas fallback on iOS 11 for HLS to circumvent playback bug introduced in iOS 11 and higher
- Fix macOS Safari 11 video priming
- Fix initial 3D UI state in Oculus Internet on GearVR
- Add custom “x-dl8-evt-ready” DOM event to wait for before using Delight VR element specific APIs
- Add ability to add “window-name” and “window-features” attribute to dl8-external-content to provide more control over link opening behavior
1.3.5 (2017-09-14)
- Removed custom font to increase compatibility and reduce file size
- Better callback attribute support for hub in dynamic mode and recommendations
- Increased recommendation maximum count
- Improved 3D UI layouting
1.3.4 (2017-08-10)
- Fix iOS >=10.3 in-VR canvas text rendering
1.3.3 (2017-08-09)
- Fix console error with third-party iframe messaging
- Add browser page visibility handling to smartly pause and resume video
1.3.2 (2017-08-03)
- Rename ‘Enter VR’ to ‘Start’ for confirming starting the player inside VR browsers like the Oculus Browser and the Samsung Internet Browser
- Improve recommendation horizontal scroll reset on video pause
- Fix issue with recommendations that were not properly deleted after exiting the player
- Fix bug where it was not possible to add live video or external content to the hub
- Fix video y-flipping issue on Windows 10 IE
1.3.0 (2017-07-21)
- Add recommendations feature for showing related videos and external links directly inside the player
- Improve settings view interaction
- Improve video source management logic
- Fix Hub state saving
1.2.16 (2017-07-18)
- Add all Sony Xperia XZ variants and Xiaomi Redmi 3 to phone list
- Improve dialog and overlay styling
- Fix iOS 11 video rendering issue
- Fix seeking bar time overlay positioning
- Fix resetting viewport meta tags after closing player
- Fix seeking bar width on Chrome with device pixel ratio > 1
1.2.12 (2017-06-23)
- Fix rendering bug with antialiasing enabled on Android Chrome 58 on a subset of phones
- Improve OnePlus 3 phone detection
1.2.10 (2017-06-16)
- Add specialized <dl8-live-video> UI in VR
- Add preview thumbnail support through VTT files
- Add Gear VR and Daydream controller support
- Improve general UX in Oculus Browser
- Improve resolution for the Oculus Browser and Samsung Internet on Gear VR
- Improve visibility of the VR video control UI
- Made drag controls the default on tablets
- Fix IFrame handling when it is embedded via relative URL
- Fix native cardboard and daydream VR support for Chrome 59 and upward
1.2.9 (2017-05-19)
- Add option to flag video sources as incompatible for Samsung VR
- Fix sideloading via Samsung VR
1.2.8 (2017-05-16)
- Add <dl8-live-video> element that supports live streaming UI
- Add popular recent phones to the wizard phone select list
- Fix autoplay for cors-fallback-url redirects
- Fix hub state resurrection on returning from a content
- Improved performance for iOS HLS video playback
- Workaround for Oculus Browser bug where video sphere was not drawn to screenbuffer
1.1.23 (2017-05-05)
- Prefer progressive video source in favour of HLS on iOS browsers to improve playback performance
- Fix CORS check to incorporate different ports
- Improve HLS ABR Manager algorithm to improve video quality
1.1.20 (2017-04-27)
- Add iFrame support
- Add improved adaptive bitrate manager for HLS that tracks current FPS, MAX_TEXTURE_SIZE and more
- Improve async webworker HLS parsing
- Fix native cardboard VR support in Chrome
- Fix HLS fallback video support
- Fix rare bug when autostarting player via cors-fallback-url
1.1.11 (2017-04-13)
- Fix problem with gyroscope on iOS 10.3 and higher
1.1.9 (2017-03-07)
- Fix scrolling bug when exiting out of inline mode
- Fix Android 7 resizing
- Fix misc. style collisions
- Fix rare shader
- Improve Get VR dialog on no-WebGL
- Add support for native 2D fallback on low-end and flat video
- Add support for seeking preview
1.1.8 (2017-02-24)
- Fix VR autostart post QR-Scan on Chrome
1.1.7 (2017-02-16)
- Fix CB Enabler Link
- Fix Gaze Interaction when Gamepad connected on HTC Vive
- Fix multiple <script> embed
1.1.6 (2017-02-10)
- Fix Daydream WebVR compatibility
- Fix Chrome 57 WebComponent initialization order
1.1.5 (2017-01-27)
- Fix spatial audio sometimes not initializing correctly
- Fix spatial audio on Firefox Mobile and Firefox OSX as well as Safari OSX
- Improve spatial audio fallback and error handling for unsupported platforms (iOS Safari / IE 11)
1.1.3 (2017-01-20)
- Fix channel order for ambiX on Safari
1.1.2 (2017-01-20)
- Fix iOS viewport rendersize bug
- Improve quality switching behavior
1.1.1 (2017-01-11)
- Fix quality switching for flat video
1.1.0 (2017-01-10)
- Add DASH and HLS support
- Add support for ambisonics spatial audio
- Add orientation compass
- Add compact wizard
- Add Daydream support
- Add Pixel phones
- Add video event support
- Add support for “fps” and “format” attributes per source
- Add support for cors-fallback handling on all elements
- Add support for preferred camera controls attribute
- Fix scroll position bug in IE11
- Fix iPhone 6/7 Plus fullscreen bug
- Fix Gear VR Samsung Internet exit bug
- Improve native hardware HMD controller fallback to gaze
- Improve font rendering
1.0.6 (2016-11-17)
- Fix rare iPad video rendering error on iOS 10
- Fix iPhone (6/6s/7)Plus VR distortion detection
- Fix IE11 exit fullscreen button functionality
- Improve Samsung Galaxy S(6/6 Edge/7/7 Edge) VR distortion detection
- Add revamped settings panel selection menu for qualities and camera controls
1.0.5 (2016-11-11)
- Improve rendering performance on mobile devices
- Improve react update frequency on video playback
- Improve legibility of 3D UI fonts
1.0.4 (2016-11-07)
- Fix autoplay on cors fallback url redirect on iOS devices
- Improve code fetch behavior on iOS devices
- Improve error feedback on shader compile, parse and fetch errors
- Update link to free cardboard enabler app
1.0.3 (2016-10-28)
- Fix guarding undefined gamepad object on certain devices
- Fix CORS redirect on IE11
- Fix ES6 issue with IE11
- Fix exit tracking event
- Fix issue with double slash cors fallback url
1.0.0 (2016-10-12)
- Fix x-dl8-evt-exit CustomEvent
- Fix scroll to top on exit player issue
- Fix error report url encoding issue
- Fix WebVR in Firefox Nightly
- Fix iOS10 video texture upload
- Fix Android wakelock for VR
- Improve aspect ratio handling of embed container on resize
- Improve dynamic DOM manipulation of dl8 elements
- Add WebVR 1.1 support
1.0.0-beta5
1.0.0-beta5-rc12 (2016-09-12)
- Fix iOS (<=9) replay action on video end
- Fix cardboard photo loading on very large photos
- Fix missing cardboard enabler app link in VR Wizard
- Improve video quality pre-checking
- Improve iOS 10 video playback performance
- Add iPhone 7 and iPhone 7 Plus to phone list
- Add Galaxy Note 7 to phone list
- Add Alcatel Idol 4 and Idol 4S to phone list
- Add Samsung Gear VR SM-R322 (2015er version) HMD distortion
- Add Innovator Edition Samsung Gear VR SM-R320 to HMD selection
- Add media event listeners API on dl8-video (spec)
1.0.0-beta5-rc11 (2016-08-25)
- Fix discarding of qualities when video sources are not supported
- Fix display issue of watermark in IE11
- Add “force-inline” display-mode to force displaying player inline on every device
1.0.0-beta5-rc10 (2016-08-08)
- Fix pause video on error
- Fix tablets can’t launch VR mode
- Improve preload progress indicator handling
- Improve unification to one error report json
- Improve exiting player on cors fallback url goes back to original url
1.0.0-beta5-rc9 (2016-08-07)
- Fix HUD watermark
- Fix spacebar being captured on other input fields on the site
- Improve style guard for img hover
1.0.0-beta5-rc8 (2016-08-02)
- Improve quality list update by only triggering when old and new content is a video
1.0.0-beta5-rc7 (2016-08-02)
- Fix 3D UI quality dropdown when qualities are unplayable
1.0.0-beta5-rc6 (2016-08-01)
- Improve performance by using react’s PureComponent for pure views
- Improve using native preload attribute for video prefetching control
1.0.0-beta5-rc5 (2016-08-01)
- Fix missing IE CORS handling
- Fix content badge hiding for non white-label users
- Fix escape key for exiting player
- Improve creation of native video element late in the process to prevent downloading unnecessary content
- Add auto-redirect for cors-fallback-url
- Add preload attribute to dl8-video to control preloading behavior
1.0.0-beta5-rc4 (2016-07-23)
- Fix brand customization behavior to cover cases where not all customizations are made
- Add option to hide brand logo, watermark and content type badge
- Add Samsung Galaxy S7 Edge to supported phones
1.0.0-beta5-rc3 (2016-07-19)
- Fix enabling smooth border for cinema or flat video in VR only
- Fix cut off hover texts in tour
1.0.0-beta5-rc2 (2016-07-15)
- Fix hover border style in embed
- Fix smooth border when going into cinema mode
- Improve guard video quality when no video is active
1.0.0-beta5-rc1 (2016-07-14)
- Fix styling of title bar in combination with certain watermark image aspects
- Fix possible erroneous style overrides from external stylesheets
- Fix Samsung Internet on Gear VR button handling
- Fix rare issue when switching tabs with a connected gamepad
- Fix iOS video audio handling when multiple qualities are present
- Improve core-js es6 polyfill handling
- Improve crossorigin attribute sanitizing
- Improve differentiation between no webgl errors and regular errors
- Improve error reporting
- Improve on-screen replay, pause and play indicator animations (moved to css based rendering)
- Improve CORS handling on MacOS Safari and IE
- Add dl8-cinema element for displaying flat video in a customizable virtual cinema
- Add inline tag attribute checking and warning screen
- Add automatic removal of video qualities when source is not supported (either because of CORS, encoding or other issues)
- Add fullscreen button on mobile devices when fullscreen mode is supported and flat video is playing and look around is disabled
1.0.0-beta4 (2016-06-30)
- Fix precision of differentiation between click and drag
- Fix replay button visibility in some cases
- Fix flashing of replay, play and pause indicator
- Fix title styling
- Fix autoplay of videos on mobile
- Improve iOS video buffering
- Improve loading progress visualization
- Improve iOS audio syncing
- Improve VR video experience by pausing when entering VR and seeking to the beginning to not miss a beat
- Add flat video support for monoscopic and stereoscopic 3D videos (see docs for more info)
- Add start and exit as external Javascript APIs for all elements
- Add play and pause as external Javascript APIs for video element
- Add custom watermark support to VR video UI
1.0.0-beta3 (2016-06-17)
- Fix dl8 embed container handling. In inline mode the player now stays in DOM layouting flow
- Fix Firefox Android button styling issues
- Fix Internet Explorer mute/unmute button
- Add initial VR 3D video player interface
- Add gaze interaction on tour portals
- Add hover info title on tour portals
- Add seek head time display
- Add start-lat and start-lon to every element to set up user starting orientation
- Changed default secondary color to a more subtle dark grey
1.0.0-beta2 (2016-06-13)
- Fix focus of VR button to prevent toggling VR on spacebar
- Fix double script import
- Fix wheel speed for IE11
- Fix CSS to prevent overrides
- Fix video undersampling
- Fix iPhone 5 selection in Wizard
- Fix Firefox/Android VR mode resize problem
- Add Cardboard Photo formats for dl8-img and dl8-tour
- Add content error overlay
- Add support for room scale VR
- Add better CORS handling for iOS/Safari
- Add CORS fallback handling
- Add support for audio on iOS
- Add QR code for non-vr browsers
- Add Gamepad support
- Add video quality switching
- Add better highp float handling
- Add float precision friendly distortion mesh uv
- Add white-label support
- Add IE11 video rendering fallback
- Add more HMDs to list of supported headsets (i.e. MR.CARDBOARD)
- Remove exit dialog
- Remove h1 tags to improve SEO for customers
1.0.0-beta1 (2016-05-09)
Initial Beta Release
Compatibility
Compatibility
Supported HMDs
We strive to support as many HMDs as possible with Delight VR. To make things accessible to the end-user we provide users with a wizard, enabling to configure the user’s HMD. Here is a list of all currently supported devices by Delight VR.
Cardboard compatible headsets
Through our Wizard and our predefined distortion database we support nearly any common Cardboard compatible headset on the market (i.e. Google Cardboard v1.0, Google Cardboard v2.0, Zeiss VR One and many more) on Android Phones as well as on iPhone.
Google Daydream
Is fully supported including Daydream controllers with Chrome Android 59 and up.
Samsung Gear VR
Is fully supported in the Oculus Internet Browser (Internet Tab in Oculus Home) including full Gear VR Controller support.
Alternatively Samsung Internet from the Oculus Store can be used. Users will be prompted to enable WebVR automatically.
Finally any regular mobile browser can be used with the Samsung Gear VR in Cardboard mode with the Cardboard Enabler app.
Desktop VR headsets
All major desktop VR headsets are supported. Specifically Oculus Rift (CV1 and DK2) and HTC Vive with WebVR enabled browser (as of writing these are special WebVR builds of Chromium and Firefox nightly).
Supported platforms
All major browsers and platforms are supported by Delight VR, in more detail:
- Recent versions of Chrome on Windows, OSX, Linux, Android, and iOS.
- Recent versions of Safari on OSX and iOS.
- Recent versions of Firefox on Windows, OSX, and Linux.
- Recent versions of IE 11 and Edge on Windows.
Caveats
To ensure that the Delight VR experience is smooth for all users, here are some hints to consider when embedding Delight VR into your HTML.
- CSS styling: Due to it not being an iframe solution per-se CSS collisions can happen in rare instances, especially if global element styles are applied.
- Whitelabel logo CORS requirement: When using a brand logo and/or brand watermark logo, be sure to supply correct CORS headers on your remote server when serving the logos from a cross-origin domain to ensure the logos are displayed correctly in the VR controls. For maximum compatibility we recommend to host logos on the same domain or use a data-uri.
Dynamic Affiliate Spots
Dynamic Affiliate Spots (Beta)
Delight VR Dynamic Affiliate Spots provide a standard non-intrusive way to display affiliate items on top of Delight VR Video content. They do not strive to be completely customizable, but rather be constrained in order to provide a user-friendly, standardized yet highly convertible affiliate space. They integrate neatly with the UX of Delight VR and thus seem naturally embedded into the playout experience.
<dl8-affiliate>
To enable the feature a <dl8-affiliate> tag must be placed as a child of <dl8-video>. The <dl8-affiliate> tag itself supports two children: <dl8-affiliate-spot> and <dl8-affiliate-item>.
<dl8-affiliate-spot>
Affiliate spots describe the appearance and behavior of places where you want your items to display in Delight VR. Affiliate spots can be defined by using the <dl8-affiliate-spot> tag. The tag currently supports two attributes:
placing=”<string>” [mandatory]
The location/placing of the spot. This attribute can currently be one of:
WIZARD
Will be shown when the user enters the VR Wizard screen. This placing supports multiple items.
PAUSE
Will be shown when the user pauses the Video.
NO_VR_SCREEN
Will be shown when the user presses the VR button, but does not have a Headset connected (on desktop). This placing supports multiple items.
cta=”<string>” [optional]
Defines a CTA (Call To Action) text to be displayed at a sensible location on the defined spot.
<dl8-affiliate-item>
Affiliate items are what ultimately gets displayed and is what you want to show/sell. Affiliate items are described by the <dl8-affiliate-item> tag. Once you have defined a number of affiliate items, they are distributed randomly across the <dl8-affiliate-spot>s as defined above. An affiliate item needs at least an “url” and a “name” attribute to be valid. But it supports more attributes to describe the affiliate item further and to customize it’s appearance.
url=”<URL>” [mandatory]
The URL to redirect to when the affiliate item is clicked.
name=”<string>” [mandatory]
The name that should be displayed on the affiliate item.
thumbnail=”<URI>” [optional]
An URI pointing to a thumbnail Image describing the product. It is recommended to use square aspects but you can also use slightly wide images. Also it is recommended to use medium resolution images to avoid oversampling and high load-times.
description=”<string>” [optional]
An optional more detailed description of the item you want to redirect to.
Example
A full example of a <dl8-video> with a <dl8-affiliate> configuration could look as follows:
<dl8-video title="Example-Video" author="Jane Doe" format="STEREO_180_LR" poster="example.jpg" display-mode="inline">
<source src="example.mp4" type="video/mp4" />
<source src="example.webm" type="video/webm" />
<dl8-affiliate>
<dl8-affiliate-spot placing="WIZARD" cta="Need a headset?"></dl8-affiliate-spot>
<dl8-affiliate-spot placing="PAUSE"></dl8-affiliate-spot>
<dl8-affiliate-spot placing="NO_VR_SCREEN" cta="Get the full experience!"></dl8-affiliate-spot>
<dl8-affiliate-item
name="Item 1"
thumbnail="//example.org/affil-item1-thumb.jpg"
description="Get Item 1 Here!"
url="https://example.org/tracking/item1"
></dl8-affiliate-item>
<dl8-affiliate-item
name="Item 2"
thumbnail="//example.org/affil-item2-thumb.jpg"
description="Get Item 2 Here!"
url="https://example.org/tracking/item2"
></dl8-affiliate-item>
<dl8-affiliate-item
name="Item 3"
thumbnail="//example.org/affil-item3-thumb.jpg"
description="Get Item 3 Here!"
url="https://example.org/tracking/item3"
></dl8-affiliate-item>
</dl8-affiliate>
</dl8-video>
Banner Advertisements
Banner Advertisements (Beta)
The Delight VR Advertisement feature allows you to inject display banner ads into advertisement spots within the player’s HTML UI as well as the VR 3D UI of the player. This allows you to display your banners directly within VR. For the first iteration of the feature we support only a select number of spots to not overflow the VR space and player real-estate. The system was kept as extensible as possible and allows you to write a custom JavaScript binding between your ad-network and the player.
Supported Spots
In the HTML portion of the player, only the pause spot is supported at 300x250px. In VR we support four banner placements, alongside the 3D UI (Player Controls). These banners always show when the controls are opened in VR; not only if the video is paused. Keep in mind that if you are using the Delight VR Recommendations feature, the VR_HUD_BOTTOM_BANNER_468X60 spot will be ignored.
HTML UI
- DESKTOP_PAUSE_CENTRE_RECTANGLE_300X250
- MOBILE_PAUSE_CENTRE_RECTANGLE_300X250
VR 3D UI
- VR_HUD_TOP_BANNER_468X60
- VR_HUD_BOTTOM_BANNER_468X60
- VR_HUD_LEFT_SKYSCRAPER_160X600
- VR_HUD_RIGHT_SKYSCRAPER_160X600
Implementation
To implement the feature on your deployment of Delight VR you have to write the declarative markup and a binding function in JavaScript that will get called each time an advertisement spot is possible to be displayed in the player.
HTML
Add the <dl8-advertisement> tag as a child of a <dl8-video> tag.
It requires the attribute on-request-advertisement to be present, which takes a function identifier as a value (see Javascript section for more information about the function implementation).
<dl8-video>
...
<dl8-advertisement on-request-advertisement="requestAdvertisement">
</dl8-video>
JavaScript
You can define a custom function which acts as a binding layer between the player and your ad provider. This function is called every time the player can display a certain advertisement spot. Information about the spot is passed in the requirement object, passed as a first parameter. Hints are provided in a second object, for contextualized information that could be used to make better decisions on the ad type that is ultimately requested and finally a callback is passed that needs to be called with the final data of what to display. Note that if you don’t want a certain spot to be filled you should call the callback function with null. Below you will find the details needed to implement each part:
Sample
function requestAdvertisement(requirement, hints, callback) {
switch (requirement.spot) {
case 'DESKTOP_PAUSE_CENTRE_RECTANGLE_300X250': {
...
const advertisement = // Fetch your advertisement from ad network
...
// or callback(null) when no ad should be displayed
return callback({
type: //advertisement type
payload: {
uri: //advertisement source uri
adLink: // advertisement url link (only for type image)
}
})
}
... // Other cases implementation
}
}
requirement (object)
An object that provides information about what spot should be filled, please refer to it to provide a well defined callback object
Requirement object sample:
{
spot: 'DESKTOP_PAUSE_CENTRE_RECTANGLE_300X250',
type: ['image']
}
spot (String)
Spot identifier which can be used, for example, in a switch statement to fetch a different asset for this specific spot
type (Array)
Array of available types for the advertisement asset. Values can be image and/or iframe
hints (Object)
An object that provides hints about the state of the player. Useful for data manipulation upon certain conditions, before firing the callback function
hints = {
screen: {
width: Integer (px) // Player width,
height: Integer (px) // Player height,
fullscreen: Boolean,
portrait: Boolean,
vrActive: Boolean
},
device: {
mobile: Boolean,
tablet: Boolean,
android: Boolean,
ios: Boolean,
ie: Boolean,
vr: Boolean
}
}
callback (Function)
A function that must be called with an object as the first parameter that adheres to the following structure:
{
type: String,
payload: {
uri: String,
adLink: String
}
}
type (String)
Accepted values are “image” or “iframe”. In the case of VR spots the value “iframe” is not supported.
payload (Object)
- URI (String) The URI that is either the image URL or the iframe URL to be displayed as an advertisement.
- adLink (String) In case the type of the advertisement is “image” this is the target URI that should be navigated to if the user clicks on the advertisement banner.
dl8-img
<dl8-img>
With the <dl8-img> element you can display panoramic images in lots of different formats in VR as well as on desktop and mobile. The <dl8-img> element works much like any normal img tag. You mainly need to specify the src attribute and a format and you’re ready to go.
<dl8-img src="image.png" poster="poster.jpg" title="Example Image 1"
author="John Doe" format="STEREO_360_TB">
</dl8-img>
<dl8-img src-left="lefteye.jpg" src-right="righteye.jpg" poster="poster.jpg"
title="Example Image 2" author="Jane Doe" format="STEREO_CUBEMAP">
</dl8-img>
{src|src-left|src-right}="<uri>" [mandatory]
The image src URI to use. You can optionally provide src-left and src-right to separately define the image for each eye in VR.
format="<string>" [mandatory]
Defines the mono or stereo format the image is provided in. Delight VR supports all common stereo/mono 360/180 equirectangular and spherical formats.
- STEREO_180_LR: A 180 degree stereo equirectangular mapping, left and right eye being side by side.
- STEREO_180_LR_SPHERICAL: A 180 degree stereo spherical mapping, left and right eye being side by side.
- STEREO_180_TB: A 180 degree stereo equirectangular mapping, left and right eye being on top and bottom respectively.
- STEREO_180_TB_SPHERICAL: A 180 degree stereo spherical mapping, left and right eye being on top and bottom respectively.
- STEREO_360_TB: A 360 degree stereo equirectangular mapping, left and right eye being on top and bottom respectively.
- STEREO_360_LR: A 360 degree stereo equirectangular mapping, left and right eye being side by side.
- MONO_360: A 360 degree mono equirectangular mapping.
- STEREO_CUBEMAP: A 360 degree stereo cubemap. 6 sides horizontally for each eye. Please provide src-left and src-right for this format. This format is commonly exported from OctaneVR renderer.
- CARDBOARD_PHOTO: A photo taken with the Cardboard Camera App. This is typically a 360° equirectangular jpg with the left eye as the base image data and the right eye encoded in metadata.
dl8-tour
<dl8-tour>
With the <dl8-tour> element you can effortlessly integrate an interactive tour consisting of multiple viewpoints and connected via so called portals in your website. The <dl8-tour> element is the root element and therefore the entry point for defining an interactive tour. It makes use of child elements to describe the actual tour images (or probes) as well as the portals that connect probes with each other. Thus it works much like any other nested DOM structure. The <dl8-tour> element follows the common Delight VR API. See below for an example and all tour specific attributes and child elements.
<dl8-tour poster="poster.jpg" title="Example Tour 1" author="John Doe"
start-probe-id="living-room">
<dl8-tour-img probe-id="bathroom" title="Bathroom" format="STEREO_360_TB"
src="bathroom.jpg">
<dl8-tour-portal to="living-room" lat="0" lon="270" distance="1.5"
title="Enter Living Room"></dl8-tour-portal>
</dl8-tour-img>
<dl8-tour-img probe-id="living-room" title="Living Room"
format="STEREO_360_TB" src="bathroom.jpg">
<dl8-tour-portal to="bathroom" lat="0" lon="90" distance="1"
title="Go to Bathroom"></dl8-tour-portal>
</dl8-tour-img>
</dl8-tour>
start-probe-id="<string>" [optional]
Defines the id of the <dl8-tour-img> element that should be the starting point of the tour. This id must match one probe-id of a <dl8-tour-img> child element. If nothing is set the first <dl8-tour-img> will be the start of the tour.
<dl8-tour-img>
The <dl8-tour-img> describes one of the probes the tour is comprised of. It has the following attributes that can be set:
probe-id="<string>" [mandatory]
A unique freely definable id within the scope of the <dl8-tour> that is used throughout the scope of the <dl8-tour> parent element to reference to this probe.
format="<string>" [mandatory]
The image format that should be used for this specific probe. Please note that you can mix and match multiple format types for each of the defined <dl8-tour-img> elements that are part of the <dl8-tour> parent element. See the image element format API for further information.
title="<string>" [optional]
The title string of the probe. This will be used as the player headline when viewing this probe and will further be used as the pop-over text on a portal, when hovered, and when the portal’s “title” attribute is not set.
src="<uri>" [mandatory]
The image src URI to use. You can optionally provide src-left and src-right to separately define the image for each eye in VR.
rotation-y="<number>" [optional]
The angle in degrees of rotation of the probe around the y-axis (up-axis). This attribute can be used in case the probes comprising the tour were not completely aligned and the initial relative rotations of probes have to be adjusted. The default is 0 degrees.
<dl8-tour-portal>
The <dl8-tour-portal> element describes a portal or “hotspot” that connects the parent <dl8-tour-img> with another <dl8-tour-img> and thus forms a portal between those two. It can be placed in a polar coordinate fashion using latitude/longitude and distance. It supports the following attributes:
to="<string>" [mandatory]
Defines the “probe-id” of any <dl8-tour-img> within the scope of the parent <dl8-tour> element to which the portal should lead to. Please note that self referencing probe ids are not possible and will be ignored.
title="<string>" [optional]
The title string of the portal. This will be used in the pop-over text on a portal when it is hovered. Example usages could be “Enter Bathroom” or “Go to Outside”.
lat="<number>" [optional]
The latitude angle in degrees where the portal should be placed.
lon="<number>" [optional]
The longitude angle in degrees where the portal should be placed.
distance="<number>" [optional]
The distance in meters from the viewer to where the portal should be placed. The default is 1 meter.