360° and VR Video playback support in WS.WebTV | WS.WebTV Documentation | WebTV Solutions

Print
360º video playback demonstration: http://www.webtvsolutions.com/webtv-en/index.php/video/31/360-video-demo/

Since WS.WebTV 2.1 we have added support for 360° video playback and VR (only available in the HTML5 video player). Below you will find important information regarding the implementation of this technology in WS.WebTV.

Experimental feature

This feature is experimental and requires several Javascript libraries (three.js, WebVR Polyfill, WebVR Boilerplate, etc.) in order to work. Since 360 videos and VR are evolving technologies, the current implementation in WS.WebTV may change in future version. Due to its experimental nature we do not guarantee that this functionality is free from errors or that it will be further developed (although it is our intention) or that its functionality will remain the same in future releases of WS.WebTV.

Changing the viewing orientation during playback

- If the video player detects that the Web browser supplies "device orientation" information then it will use that information to "look around" the 360º scene; in this regard, you just need to move your device around (pointing up, down, sides, etc.) to change the viewing orientation.
- If the video player does not detect the previous then it will allow you to use the mouse (click and drag) in order to change the viewing orientation.

Supported 360 projection

Videos must be in equirectangular projection (in case of doubt, you can search on Internet for "creating equirectangular 360 videos"...).

Supported 3D/stereo modes (selectable)

The following modes are supported:

2D


3D Left / Right


3D Top (left) / Bottom (right).

CORS

If the video files/streams are hosted in a server which is diffrerent (different domain) than the one that hosts the WebTV then the resources must be delivered with CORS headers (https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS) permitting GET requests.

Browser Support

360 only (Desktop)
Should work fine in the latest versions of Chrome, Firefox and Opera (and maybe Safari for Mac OSX).

360 only (Mobile)
Should work fine on native Android 6.x and 7.x browser, Chrome (Android), Opera (Android), Firefox (Android) and Safari (iOS 10.x). On Chrome and Firefox for iOS/iPhone, if the video is played back it will be opened fullscreen instead of the 360 player; therefore, the 360 viewing mode is only available when the video is paused.

360 + VR/Cardboard (Mobile)
Should work fine on native Android 6.x and 7.x browser, Chrome (Android), Opera (Android) and Safari (iOS 10.x). Won't work (or won't work fine) on Chrome and Firefox for iOS/iPhone.

Known issues while playing back VR/Cardboard mode
• When playing back a playlist of 360 Clips in VR/Cardboard mode, the responsiveness/speed of the orientation change may degrade over time; specially if the 3D mode (LR/TB/2D) changes from Clip to Clip. For better results it is better to always use the same 3D mode for all 360 Clips included in the same playlist.
• When entering/exiting several times into VR/Cardboard mode, the responsiveness/speed of the orientation change may degrade over time.

Performance

Hardware requirements
Playing back 360 videos requires a powerful hardware; therefore, the playback may be "jerky" on slow devices. In the case of Smartphones, a high-end device is required. Additionally, in order to use the VR/Cardboard mode, the users must have a high-end mobile device which supports it.

General
Keep the Clip/Channel template as light as possible. Background Javascript processes can impact a lot in the fluidness of the 360 videos; specially in VR/Cardboard mode.

Limitations

Some WS.WebTV features/extensions (like PlayerLogo, ClipInteractivity and Subtitles) may not work when playing back 360 videos; specially in VR/Cardboard mode.

Credits: Sample 360 image taken from "Rendering with Arnold for Oculus Rift" video (http://pedrofe.com/rendering-for-oculus-rift-with-arnold/).