360° VR Video Play panoramic 360, VR and Stereoscopic video within JWPlayer 8


This example displays the basic usage of configuring 360° video sources. WebXR and Cardboard mode support is added with special WebXR events for debugging.

Introduction

360° video is an immersive technology and way of delivering video on the web. It is similar to panoramic images of the past but as moving picture with various control and functionality for panning the camera view.

This feature has been updated to accomodate the new WebXR api with a polyfill for WebVR 1.0 and Cardboard view for Safari. WebXR is now the new standard for WebVR which Chrome currently supports.

This feature has been updating to support the new orientation sensor api available in Chrome browsers in Android.

This gives users new ways to interact with the video and control what they see panning the camera view around the space.

This technology makes use of WebGL in browsers that support it, drawing to a Html5 canvas accompanying video playback for the audio. Any Html5 video will be supported including Mpeg Dash and HLS Native and HLS.JS.

Being a Html5 technology there are known problems with lack of standards in IOS, Safari,IE.

Cubemap Video Support

According to the investigations and work at Facebook https://code.facebook.com/posts/1638767863078802/under-the-hood-building-360-video/. Cubemap encoded videos help reduce wasted pixels and therefore bandwidth. The videos frames are tiled into a 3 x 2 formation.

Due to their discoveries equirectangle videos have wasted pixels around the edges and duplicated pixels where it wraps. Cubemaps have defined edges and therefore no redundant pixels are in the video.

These are space and performance saving optimisations. Facebook have an Ffmpeg encoder filter called Transform360. Which will help transform Equirectangle sources to Cubemap video sources. The demo was produced using this filter.

Fisheye Camera Support

There is support for both Ricoh Theta dual 360 Fisheye and single 180 Fisheye support. When using 180 degree videos a skybox texture is supported.

360 Video Controls

Various user controls are supported for controlling the video camera view.

Desktop rotation controls include keyboard key codes, mouse drag and pointer lock controls for rotating and panning, mouse wheel for zooming. An external player api is provide to also control rotation using scripting.

Mobile rotation controls include touch for rotation when not in fullscreen mode. In non VR fullscreen mode mobile orientation apis are used for controlling rotation with the deivce.

In VR headsets mode on Mobile and in WebVR enabled browsers on desktop. WebVR apis are used to control rotation using orientation apis of the VR Oculus or Samsung Gear headsets or the mobile device.

On mobile in WebVR cardboard mode it will fallback to the device's orientation.

VR Controllers are supported to control a virtual video controlbar. When connected the GearVR and DayDream remote or Oculus and Vive gaming controllers will be enabled as a laser pointer.

Mobile Support

360 video support is possible on Android 4.3 and above with Firefox or Chrome or Safari on IOS 8 and above that supports WebGL.

On Samsung S8 devices with Android 7, the default browser is Samsung Internet and has both WebGL and WebVR support.

With the Safari browser on IOS it will use the Cardboard view in VR mode having no WebVR / WebXR support. The stock Android browser has neither WebGL or CORS support.

Aside the documented issues with cross domain bugs with IOS, only IOS 10 and above for Iphone has inline video playback support.

IOS and Android apps can be built around Apache Cordova or IONIC Framework WebView based applications. This also helps work around the many IOS crippling limitations. The Android version of WebView uses Chrome so it's dependant on keeping the Chromium WebView up to date.

"pinned to Home Screen" standalone WebView apps of the page on IOS can help work around IOS Iphone inline playback limitations. However it suffers the crossorigin limitations Cordova apps seems to work around.

Work arounds are available for bugs in Safari when streaming HLS formats, making live 360 video possible.

WebXR/WebVR Support

VR support for VR headsets like Oculus Rift, Vive, Samsung Gear VR, Google DayDream View, Microsoft Mixed Reality and Google Cardboard is possible with a VR stereo view of the video and autonomous rotating, panning and zooming control using either Cardboard webxr polyfill or native WebXR/WebVR support if enabled in the browser.

VR headset support is possible with WebXR/WebVR browser API's found in Chrome, Firefox and Edge browsers. This relies on the Oculus Runtime for Windows, therefore OSX support has been dropped for now. These API's provide controls and status from the headsets which can then be used for controlling the video camera view.

Microsoft Mixed Reality with the Mixed Reality Simulator and supported headsets. Provides WebVR support with the Microsoft Edge browser.

WebXR/WebVR is available on Android Chrome, Firefox and Samsung Gear VR Browser, this is now enabled by default.

Daydream View requires the Daydream application installed. And Chrome browser with WebVR enabled on Android.

VR Video Controls and subtitles text support is available in WebVR presentation mode.

The video controls will display when clicking the VR display. And a reticle can be used for gaze control.

Subtitles text will rotate with head tracking.

A flat 2D video Cinema screen mode in VR is supported.

When launching from GearVR, Cardoard, or VR headets Occulus, Vive and Windows Mixed Reality. The video will display into a virtual Cinema screen.

When subtitles are configured they will also be displayed over the Cinema screen.

Ambisonics Support

Experimental support for 4 channel Ambisonics audio tracks in video is possible through an Ambisonics to Binaural audio decoder. Browsers firstly require mutli channel. The audio requires to be authored according to Google Spatial Media specification.

Producing 360 Videos

360° video can be produced using special surround cameras like ones supplied by http://www.360heros.com/.

The camera sources are required to be stitched together after into a panoromic flat spherical picture using special VR 360° software. Software like KolorEyes or http://www.video-stitch.com/.

Live 360 is possible using a device like a Teradeck Sphere. This will publish to Wowza streaming servers which can then be packetised into Mpeg Dash and HLS.

Video Capture Support

Using the snapshot plugin, support is available to capture VR Video rendering.

Features

  • 360° video support in any Html5 supported format including Mp4, Webm, Ogv, Mpeg Dash and HLS.
  • Efficient , bandwidth and space saving Cubemap video support.
  • 180 degree video rendering support. This will render in a half sphere with head turn rotation.
  • Various user control functions for the video rotation including keyboard, mouse, tablet orientation and movements, tablet touch, external api controls and a movement pad area. In WebXR/WebVR mode orientation controls are provided by the headsets.
  • VR headset support for Oculus Rift, Vive when used with a VR API enabled browser like Chrome and Firefox nightly.
  • WebVR support for Microsoft Mixed Reality Simulator and supported headsets using Microsoft Edge browser.
  • Support for Samsung Gear VR is through the Samsung Internet or Oculus VR Browser which also supports WebVR after being enabled.
  • Google Daydream View support is available with Chrome for Android with the Daydream app installed.
  • Cardboard mode support for non WebVR browsers is available using a customised reduced version of WebXR Polyfill. This is optional and loaded on demand.
  • Full WebXR display events provided.
  • Skeleton Cordova application supplied for IOS and Android based apps. Cordova WebView apps are required to work around IOS Iphone inline video limitations.
  • Support for IOS "pinned to Home Screen" standalone WebView apps for inline playback support on Iphone.
  • Pseudo WebVR support for Cardboard uses mobile orientation controls in VR mode or uses WebVR controls if enabled in Chrome and Firefox on Android.
  • Stereoscopic preview mode for desktop viewing.
  • VR headset toggle button to go into VR fullscreen / VR display presentation mode and back to normal mode.
  • When in WebVR headset presentation mode. A status splash page will be displayed.
  • Mobile landscape orientation screen lock support for browsers that support it in VR mode.
  • Android and IOS wakelock support to prevent the screen going to sleep in VR mode.
  • Orbital navigation dock area for not only controlling on the video display itself with a mouse.
  • Hacks required for mouse controls to prevent the player toggling the video.
  • proxy sources for Html5 non cross origin standards compliant browsers like Safari, IE and Android default browser.
  • Dock button for switching to the proxy source of the VR video.
  • Stereoscopic side by side video support for 2D picture.
  • Playlist support between non VR and standard videos to switch between rendering views.
  • Pseudo ratio scaling of the WebGL rendered video. VR mode will scale to fit the screen.
  • Works with any Html5 based streaming including Mpeg Dash and HLS.JS.
  • Ambisonics surround audio support for rotating with the video.
  • Mouse pointer lock controls features to rotate the camera with a mouse pointer rather than mouse drag controls.
  • HLS support and fixes for Safari.
  • Flat 2D video in VR Cinema screen mode support for VR headsets and Cardboard.
  • Subtitle text overlay support for Cinema screen and 360 mode.
  • VR Video controlbar support in WebVR presentation mode.
  • VR Controller support to interact with the virtual controlbar.
  • Dual 360 Fisheye and Single 180 Fisheye support.
  • Pseudo fullscreen for IOS in normal and VR cardboard mode due to IOS not supporting fullscreen.
  • IOS 13 orientation api permissions check on user gesture.
  • IOS 13 fullscreen and cardboard orientation.
  • Using the snapshot plugin, support is available to capture VR Video rendering.

Known Issues:

  • IOS 13 requires a gesture to accept orientation api permissions. This happens on first user gesture.
  • IOS before 13 lacks html5 video fullscreen api. A pseudo fullscreen in normal and Cardboard VR mode has been provided.
  • IOS lacks screen orientation lock api when going fullscreen or pseudo VR Cardboard mode
  • IOS lacks WebXR/WebVR api and requires the Cardboard polyfill to be enabled.
  • Multi channel audio support works on most browsers apart from IOS. Therefore IOS requires a stereo audio source instead.
  • Safari and IE 11 does not support pointer lock browser api's therefore the pointer lock controls will not display.
  • HLS rendering in IOS has been fixed in IOS 11.3 and above.
  • A regression has been found in HLS rendering in IOS 12 and requires a colour flip flag enabled.

More Information:

(Current Version 7.7.5)

Compatibility

  • Video.js 7.7.5 and above

Plugin Available For Purchase via Paypal


License Options
Domain(s)

License Information

The VR 360 plugin is a once off commercial license with updates and support to the VR 360 plugin only. Flowplayer related questions and support may be provided on their forums at http://flowplayer.org/forum

  • Single Domain License - Suitable for small sites with updates and unlimited support included.
  • Multi Domain License - Suitable for larger sites and video platform sites with updates, feature requests and unlimited priority support included.
  • Unlimited Licence - Suitable for Software as a service 360 video platforms.

Note:

With your purchase please provide your domains to be provided with your licensed plugin. New domains need to be requested manually for the moment.

Demo

Contact for a site demo download.

Browser Support

Z
OS Browser Description
OSX
Google Chrome, Firefox, Safari. macOS have the CORS bugs fixed. CORS problems might still be an issue with Mpeg Dash streams in Safari.
Windows
Google Chrome, Firefox, Edge, IE 11 with CORS proxy.
WebXR/WebVR Enabled Browsers
Chrome WebXR supported, Firefox WebVR supported with WebXR polyfill, Microsoft Edge for Windows Mixed Reality. Windows Mixed Reality
IOS
Safari with CORS proxy for IO9 and 10. IOS 11 and above. WebView Cordova apps. IOS 10 and below requires a CORS proxy. IOS 11 and above has the provided CORS fixes. IOS 11.3 and above has the HLS fixes. IOS 12 possibly has HLS rendering issues again requiring a color flip.
Android
Chrome, Samsung Internet, Chrome Dev, Firefox, Occulus Carmel. WebView Cordova apps. Android fully supports WebXR and new orientation sensor apis.

Configuration

property / datatype default description
vr
boolean
true Enable 360 video and VR headsets support.
forcevr
boolean
false Force VR headsets support for desktop browsers or else the feature will only be enabled for mobile devices for now.
polyfill
boolean
Optional. Enable the WebXR polyfill to provide Cardboard mode support for non WebVR enabled browsers. This will be loaded on demand within the same path as the script within a "resource" directory.
fov
int
90 The field of view setting. This sets how far or close the camera needs to be for the video.
camerafront
boolean
true The camera starts at the "front" of the video, this can be set to be flipped around to start initially from the back.
projection
string
360_MONO Support for different video projection types. 360_MONO: Standard equirectangular 360 videos. 180_LR: Left Right Stereo 180 degrees videos 360_TB: Top and Bottom Stereo 360 degrees videos 360_CUBE: 360 Cubemap videos. Converted from equirectangular videos. 2D: 2D VR Cinema projection in VR mode
mouseDamping
int
0.25 The sensitivity of the mouse controls. A value between 0.05 and 1.
keyDamping
int
0.10 The sensitivity of the key controls. A lower value means more smoother.
keys
object
{ left: 65, up: 87, right: 68, bottom: 88 } The key character codes used for the keyboard rotation controls. The arrow keys are taken over for Flowplayer's seeking controls.
pointerlock
boolean
false Enable mouse pointer lock toggle controls.
scaleMobile
boolean
true Enable scaling in fullscreen for mobile. If disabled this will stretch in fullscreen mode.
antialias
boolean
false Add anti aliasing to the rendering.
ambisonicOrder
int
1 The ambisonics order of the Ambisonics audio track. Either 1, 2 or 3.
channelMap
array
[0,1,2,3] The channel mapping for Ambisonics audio channel ordering. If ACN ordering is not used byt FuMa use [0,3,1,2]
postGain
int
1 Add post gain to the Ambisonics decoding and rotation gains. Only required if the loudness of the audio is not accurate. Defaults to 1.
debugVrDisplay
boolean
false Enable WebVR frame data update events. A player event "vrframedata" will be dispatched with specific data about the display including orientation, position and view matrix.
previewVrPresentation
boolean
false enable preview of WebVR stereo display while presenting to a headset. Or else a splash status will be displayed.

CORS Rules Requirements

For this feature to work successfully the video hosting server requires Cross Origin Resource Sharing rules to be enabled in the headers of the request.
This is required to enable WebGL rendering of cross origin video content in browsers that support it.

The header of the cors request must expose a `Access-Control-Allow-Origin` header with either a multiple list of domains including ports if using ports or an asterix wildcard to allow all domains.
A `Access-Control-Allow-Methods` can be exposed to control what request methods are allowed. For authenticated logins with cookies the `Access-Control-Allow-Credentials` header must be enabled and the feature will pass cookie sessions and other cookies along with the request.

An example request header can look like the following:


    Access-Control-Allow-Origin: http://localhost:8000
    Access-Control-Allow-Methods: GET
    Access-Control-Allow-Headers: Content-Type, Accept
    Access-Control-Allow-Credentials: true
    Content-Type: application/json

Enabling CORS on S3

Follow the guide here to enable CORS rules on the bucket.

In the required bucket, choose "Properties", then "Permissions", then choose "Edit Cors Configuration"

A configuration should look like this or a more restricted Origin with a host domain


    <?xml version="1.0" encoding="UTF-8"?>
    <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <ExposeHeader>Content-Length</ExposeHeader>
    <ExposeHeader>Accept-Ranges</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
    </CORSRule>
    </CORSConfiguration>

CORS Rules Requirements

For this feature to work successfully the video hosting server requires Cross Origin Resource Sharing rules to be enabled in the headers of the request.
This is required to enable WebGL rendering of cross origin video content in browsers that support it.

The header of the cors request must expose a `Access-Control-Allow-Origin` header with either a multiple list of domains including ports if using ports or an asterix wildcard to allow all domains.
A `Access-Control-Allow-Methods` can be exposed to control what request methods are allowed. For authenticated logins with cookies the `Access-Control-Allow-Credentials` header must be enabled and the feature will pass cookie sessions and other cookies along with the request.

An example request header can look like the following:


    Access-Control-Allow-Origin: http://localhost:8000
    Access-Control-Allow-Methods: GET
    Access-Control-Allow-Headers: Content-Type, Accept
    Access-Control-Allow-Credentials: true
    Content-Type: application/json

Enabling CORS on S3

Follow the guide here to enable CORS rules on the bucket.

In the required bucket, choose "Properties", then "Permissions", then choose "Edit Cors Configuration"

A configuration should look like this or a more restricted Origin with a host domain


    <?xml version="1.0" encoding="UTF-8"?>
    <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <ExposeHeader>Content-Length</ExposeHeader>
    <ExposeHeader>Accept-Ranges</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
    </CORSRule>
    </CORSConfiguration>

CORS Requirements For Cloudfront

Cloudfront now supports CORS and delivers OPTIONS requests.

To enable OPTIONS support in Cloudfront goto the "Edit Behaviour" section of the Cloudfront distribution. choose Edit on the selected behaviour. Make sure in "Allow HTTP Methods" it looks like "GET, HEAD, OPTIONS". Check "OPTIONS" in the "Cached HTTP Methods" section and add all the suggested Whitelist Headers selection.

CORS Proxy

A CORS proxy is required to work around limitations with cross origin support on the video tag like with IE11 and older versions of Safari and IOS 10.

Using either Apache or Nginx server configs assuming the proxy module is enabled can be achieved like so:

Apache:


    ProxyPass /video/ //videos.electroteque.org/
    ProxyPassReverse /video/ //videos.electroteque.org/

Nginx:


    location /video/ {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-NginX-Proxy true;
    proxy_pass //videos.electroteque.org/;
    proxy_redirect off;
    }

Which translates to:


    http://origin.electroteque.org/video/big_buck_bunny_480p_h264.mp4

Testing CORS Server Requests

CORS server requests can be initiated with the following curl command:


    curl -I -H "Origin: http://localhost:8000" http://path/to/server

The CORS header should look like the following:


    Access-Control-Allow-Origin: http://localhost:8000
    Access-Control-Allow-Methods: GET, HEAD
    Access-Control-Max-Age: 3000
    Access-Control-Allow-Credentials: true
    Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method

Pairing Google Cardboard with WebVR display.

By default in WebVR mode. Both Samsung Internet and Google Chrome require the use of Google VR Services. This will be instructed to download if not available.

When presenting in WebVR Cardboard mode. A gear icon will appear. Choose Headset to pair WebVR with Google Cardboard using the QR Code available with it.

If using a GearVR or Daydream headset WebVR will present to those devices and not render in Cardboard mode.

Samsung Gear VR Internet Support

The Gear VR browser can be installed from the PlayStore https://play.google.com/store/apps/details?id=com.sec.android.app.sbrowser

More info https://webvr.rocks/samsung_internet

More Information at the Developer Documentation page.

Occulus VR Browser for GearVR

The default Occulus internet browser in GearVR has WebVR enabled by default and will work.

Occulus has released a WebVR browser for GearVR called Carmel. https://www.oculus.com/experiences/gear-vr/1290985657630933/

WebVR For Windows Chrome and Firefox

Desktop based WebVR is now supported in Windows Chrome and Firefox.

Support for OSX has been pulled for now until there is runtime support for OSX which Oculus also removed. OSX not being gaming specific the Oculus Rift is prioritisng Windows development.

Steps to setup WebVR for Desktop:

  • Download and install the Oculus Runtime for Windows.
  • Once installed you will need to register for a login and login.
  • "Unknown Sources" requires to be toggled on when developing for outside the Oculus store like WebVR.

WebVR Support for Windows Mixed Reality and Edge Browser.

Windows Mixed Reality is a new feature for Windows 10. That enables WebVR via the Mixed Reality Portal Simulator or supported headsets.

Cardboard Mode Support For Non-WebVR Browsers

Cardboard mode support has been externalised and made optional via the use of WebXR polyfill. The library will be loaded on demand where required.

To configure non-webvr cardboard support set the `polyfill` config.

For Cordova based apps the documentation is here

JavaScript API

Methods

The api methods are exposed on the Flowplayer 7 api to manage rotation controls.


    player.moveLeft();
method returns description
moveLeft Manually rotate 360 degrees left.
moveRight Manually rotate 360 degrees right.
moveUp Manually rotate 180 degrees up.
moveDown Manually rotate 180 degrees down.
toggleVR api to launch into WebVR headset presentation mode.

Events

WebVR specific events to update the status of the headset and if WebVR is available.



     player.on("xrsessionstart", function(e, session) {
                console.log("XR Session Start: ", session);
            });

            player.on("xrsessionstop", function(e) {
                console.log("XR Session Stop");
            });

            player.on("xrsupported", function(e) {
                console.log("XR Device Supported");
            });

            player.on("xrnotsupported", function(e) {
                console.log("XR Not Available");
            });

            player.on("xrdevicechange", function(e) {
                console.log("XR Device Changed");
            });

            player.on("xrvisibilitychange", function(e, state) {
                console.log("XR Device Visible State: ", state);
            });

            player.on("orientationrequest", function(e, permission) {
                console.log("Orientation Permission Request: ", permission);
            });

Event When does it fire?
xrsessionstart(e, session) Returns the WebXR session that contains details of the session and headset.
xrsessionstop(e) WebXR session stops.
xrsupported(e) If WebXR is supported, either native or by polyfill.
xrnotsupported(e) If WebXR is not supported.
xrdevicechange(e) When the WebXR headset is activated.
xrvisibilitychange(ev, event) When the headset visibility changes.
audioready(event) When the Ambisonics audio decoder is ready.
audioerror(event, error) When the Ambisonics audio decoder has failed to initialize and returned an error.

Cubemap Video Example

This example demonstrates Cubemap 3 x 2 sides video texture support.

Cubemap video is tiled videos of the 6 faces of the camera. This is supposed to help with better rendering quality and reduced bandwidth.

To enable cubemap support enable the `cubemap` config to cubemap: true

Facebook have been active with the Cubemap video rendering support and have produced an encoder filter for ffmpeg to convert to Cubemap from Equirectangular.

See more info at https://code.facebook.com/posts/1638767863078802/under-the-hood-building-360-video/


(function(jwplayer) {

        var player = jwplayer("cube").setup({
            width: "100%",
            aspectratio: "16:9",
            playlist: [
               { file: "//videos.electroteque.org/360/ultra_light_flight_cubemap.mp4", type: "mp4" }
            ],
            plugins: {
                "https://static.electroteque.org/js/jw7/vrvideo-8.0.0.js": {
                    projection: "360_CUBE",
                    forcevr: true,
                    //OPTIONAL: cardboard support via trimmed down webvr polyfill
                    polyfill: true,
                    fonts: { font: "font/Roboto-Bold.json", image: "font/Roboto-Bold.png" }
                   
                }
            }  
        });

    })(window.jwplayer);

    

Flat 2D Video in VR with subtitles

This example demonstrates Flat 2d video rendering in VR Cinema mode.

When subtitles are configured these will be displayed also on the VR Cinema screen.

For browsers that support WebVR and a headset is available a headset icon will appear to launch into presentation mode.

If the WebVR polyfill is configured, non webvr browsers on mobile will display a headset icon.

On Android Samsung Internet Browser, Chrome . When in webvr enabled mode rendering appears clearer than with webvr polyfill. For Chrome enabling webvr with the origin trial header is preferable.

When rotating away from the visible video screen area in VR. A text notification will appear to click to reposition the pose.




    (function(jwplayer) {

            var player = jwplayer("flat").setup({
                width: "100%",
                aspectratio: "16:9",
                playlist: [
                     {type: "mp4", file: "//videos.electroteque.org/bitrate/sintel_2000k.mp4"}
                ],
                plugins: {
                    "https://static.electroteque.org/js/jw7/vrvideo-8.0.0.js": {
                        projection: "2D",
                        forcevr: true,
                        //OPTIONAL: cardboard support via trimmed down webvr polyfill
                        polyfill: true,
                        fonts: { font: "font/Roboto-Bold.json", image: "font/Roboto-Bold.png" }
                       
                    }
                }  
            });



        })(window.jwplayer);

Stereo Rendered Video in monoscopic and VR

This example demonstrates confguring a rendered stereo top / bottom or side to side video. Either as monoscopic or in VR.

Side to side is the default configuration which can be changed to top and bottom with sidetoside: false

The clip config is required to be configured as a stereo video with stereo: true




         (function(jwplayer) {

            var player = jwplayer("stereo").setup({
                width: "100%",
                aspectratio: "16:9",
                playlist: [
                      {type: "mp4", file: "//videos.electroteque.org/360/stereo_demo.mp4"}
                ],
                plugins: {
                    "https://static.electroteque.org/js/jw7/vrvideo-8.0.0.js": {
                        projection: "360_TB",
                        forcevr: true,
                        //OPTIONAL: cardboard support via trimmed down webvr polyfill
                        polyfill: true,
                        fonts: { font: "font/Roboto-Bold.json", image: "font/Roboto-Bold.png" }
                       
                    }
                }  
            });



        })(window.jwplayer);

Ambisonics Surround Audio for VR

1st order Ambisonics audio for surround audio and panning with 360 video is possible through the browser's audio api.

Browsers firstly require to support multi channel audio so two channels ore more. IOS Safari does not support multi channel audio yet so this feature won't work with it yet and so requires an alternative source.

The Amibsonics channel order requires to be in ACN Channel Ordering. The default channel map is therefore 0,1,2,3 / W,Y,Z,X which can be reconfigured.

For FuMa Channel Ordering follows the order W,X,Y,Z therefore the channel map requires to be changed to 0, 3, 1, 2. Many Amibsonics authoring tools now follow this order.

More info Ambisonics.ch

The clip is required to be identified with ambisonics support with the config property `ambisonics`



     (function(jwplayer) {

            var player = jwplayer("ambisonics").setup({
                width: "100%",
                aspectratio: "16:9",
                playlist: [
                    {type: "video/webm", file: "ambisonicstest.webm"},
                ],
                plugins: {
                    "https://static.electroteque.org/js/jw7/vrvideo-8.0.0.js": {
                        ambisonics: true,
                        forcevr: true,
                        //OPTIONAL: cardboard support via trimmed down webvr polyfill
                        polyfill: true,
                        fonts: { font: "font/Roboto-Bold.json", image: "font/Roboto-Bold.png" }
                       
                    }
                }  
            });

            player.on("audioready", function(e) {
                console.log("Audio Decoder Ready");
                }).on("audioready", function(e, error) {
                console.log("Audio Decoder Error ", error);
                });




        })(window.jwplayer);


HLS Streaming Example

This example demonstrates Vr 360 video using HLS Streaming via HLS.JS.




     (function(jwplayer) {

            var player = jwplayer("hls").setup({
                width: "100%",
                aspectratio: "16:9",
                playlist: [
                      {type: 'application/x-mpegurl', file: '//videos.electroteque.org/360/hls/ultra_light_flight.m3u8' }
                ],
                plugins: {
                    "https://static.electroteque.org/js/jw7/vrvideo-8.0.0.js": {
   
                        forcevr: true,
                        //OPTIONAL: cardboard support via trimmed down webvr polyfill
                        polyfill: true,
                        fonts: { font: "font/Roboto-Bold.json", image: "font/Roboto-Bold.png" }
                       
                    }
                }  
            });



        })(window.jwplayer);

Pointerlock Controls Example

This example demonstrates enabling pointerlock controls for supported browsers.



    (function(jwplayer) {

            var player = jwplayer("pointerlock").setup({
                width: "100%",
                aspectratio: "16:9",
                playlist: [
                      { type: "mp4", file: '//videos.electroteque.org/360/ultra_light_flight_720p.mp4' }
                ],
                plugins: {
                    "https://static.electroteque.org/js/jw7/vrvideo-8.0.0.js": {
                         pointerlock: true,
                        forcevr: true,
                        //OPTIONAL: cardboard support via trimmed down webvr polyfill
                        polyfill: true,
                        fonts: { font: "font/Roboto-Bold.json", image: "font/Roboto-Bold.png" }
                       
                    }
                }  
            });



        })(window.jwplayer);

VR Snapshot Example

This example demonstrates making snapshot captures of the VR rendering



    (function(jwplayer) {

            var player = jwplayer("pointerlock").setup({
                width: "100%",
                aspectratio: "16:9",
                playlist: [
                      { type: "mp4", file: '//videos.electroteque.org/360/ultra_light_flight_720p.mp4' }
                ],
                plugins: {
                    "https://static.electroteque.org/js/jw7/vrvideo-8.0.0.js": {
                         pointerlock: true,
                        forcevr: true,
                        //OPTIONAL: cardboard support via trimmed down webvr polyfill
                        polyfill: true,
                        fonts: { font: "font/Roboto-Bold.json", image: "font/Roboto-Bold.png" }
                       
                    }
                }  
            });



        })(window.jwplayer);


Controls Api Example

This example demonstrates controlling the rotation of the video with api controls.

This is an auto rotation which uses the same friction setting as the key board controls using `keyDamping`




    var api = null;
    !(function () {

   
            api = videojs("api", {
                    vrsources: [
                        { type: "mp4", file:  "//flowplayer.electroteque.org/video/360/ultra_light_flight_720p.mp4" }
                    ],

                    sources: [
                      {
                        file: '//videos.electroteque.org/360/ultra_light_flight_720p.webm',
                        type: 'video/webm'
                      }, 
                      {
                        file: '//videos.electroteque.org/360/ultra_light_flight_720p.mp4',
                        type: 'mp4'
                      }, 
                      {
                        file: '//videos.electroteque.org/360/ultra_light_flight_720p.ogv',
                        type: 'video/ogg'
                    }],

                    plugins: {
                        vrvideo: {
                          
                        }
                    }
            });


    })();


    function moveLeft() {
    api.moveLeft();
    }

    function moveRight() {
    api.moveRight();
    }

    function moveUp() {
    api.moveUp();
    }

    function moveDown() {
    api.moveDown();
    }

Cordova / Ionic Mobile Apps

It is possible to build the player and 360 features into Cordova/Ionic apps or even React and other similar Native Hybrid applications. These apps rely on Webkit and Chromium WebViews on IOS and Android.

None of these types of WebViews support WebVR yet but has support for carboard stereoscopic and orientation controls in fullscreen mode.

These apps are useful to work around known Iphone limitations. The configuration therefore does not require any fallback CORS proxy sources.

More documentation is supplied on the setup, building and debugging of the applications.

More info Ionic Framework Apache Cordova



    import {Component} from '@angular/core';
    import {NavController} from 'ionic-angular';
    import {StatusBar} from 'ionic-native';

    declare var flowplayer: any;

    @Component({
    templateUrl: 'build/pages/home/home.html'
    })
    export class HomePage {
    constructor(private navController: NavController) {

    }

    ionViewLoaded() {

                videojs("player", {
                 
                    sources: [
                      {
                        file: '//videos.electroteque.org/360/ultra_light_flight_720p.webm',
                        type: 'video/webm'
                      }, 
                      {
                        file: '//videos.electroteque.org/360/ultra_light_flight_720p.mp4',
                        type: 'mp4'
                      }, 
                      {
                        file: '//videos.electroteque.org/360/ultra_light_flight_720p.ogv',
                        type: 'video/ogg'
                    }],

                    plugins: {
                        vrvideo: {
                          
                        }
                    }
            });


        }
        }

A fullscreen plugin is provided to launch the players into fullscreen automatically and also manage hiding the status bar to get the video into true fullscreen.



    flowplayer(function (api, root) {

    if (flowplayer.support.inlineVideo) {
    root.onclick = function () {

    if (api.splash) {
    api.fullscreen();
    return api;
    }
    };
    }

    //hide the status bar in fullscreen
    var nav = document.getElementsByTagName("ion-navbar")[0];
    var content = document.getElementsByTagName("scroll-content")[0];


    api.on("fullscreen fullscreen-exit", function(e) {
    var isFullscreen = e.type == "fullscreen";


    if (isFullscreen) {
    StatusBar.hide();
    content.classList.add("fullscreen");
    nav.style.display = "none";
    } else {
    StatusBar.show();
    content.classList.remove("fullscreen");
    nav.style.display = "block";
    }
    });
    });