for https://flowplayer.electroteque.org/vr360/fp6

Play panoramic 360, VR and Stereoscopic video within Flowplayer 6

spaceplay / pause

qunload | stop

ffullscreen

shift + ←→slower / faster

↑↓volume

mmute

←→seek

. seek to previous

12… 6 seek to 10%, 20% … 60%

wpan up

xpan down

apan left

dpan right

This example displays the basic usage of configuring 360° video sources with flat projection and proxy source fallback for Safari and IE browsers due to standards issues.
Introduction

360° video is an immersive new 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 gives users new ways to interact with the video and control what they see panning the camera view around the space.

VR support for VR glasses like Occulus Rift and Google Cardboard is possible with a VR split view of the video and autonomous rotating, panning and zooming control.

VR glasses support is possible with new emerging VR browser API’s in nightly versions of Chrome and Firefox which are yet to be released. These API’s provide controls and status from the glasses which can then be used for controlling the video camera view.

Various user controls are supported for controlling the video camera view including keyboard, mouse drag for rotating and panning, mouse wheel for zooming, tablet orientation and movements, tablet touch, Occulus Rift and Google Cardboard VR glasses.

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.

Being a Html5 technology there are known problems with lack of standards in Safari,IE and Android default browsers and WebGL bugs in Android Chrome that need to be addressed still.

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.
Features

360° video support in any Html5 supported format including Mp4, Webm, Ogv, Mpeg Dash and HLS.
Various user control functions for the video camera view including keyboard, mouse, tablet orientation and movements, tablet touch.
VR Glasses support for Occulus Rift and Google Cardboard VR glasses when used with a VR API enabled browser like Chrome and Firefox nightly.
Pseudo WebVR support for Cardboard uses mobile orientation controls in VR mode or uses WebVR controls if enabled.
VR glasses toggle button to go into VR fullscreen mode and back to normal mode.
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.
Fallback flat projection and 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.
Anaglyph 3D filter effect support.
Stereoscopic side by side video support.
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.

Known Issues:

For cross domain loaded videos WebGL requires CORS enabled. Safari for both OSX and IOS. IE 10 and 11. Android default browsers all lack cross origin compliant Html5 security features for Html5 video and have for many years. This is exactly the same for image captures and requires a proxy source of the video on the exact same domain as the loading page including sub domain and port.
Proxy video sources are not easily scalable having to redirect to the CDN video sources from the server therefore these non compliant browsers require initially playing back flat projection 2D video alternatives and switching to the proxy source of the VR video with a dock button.
VR glasses support is experimental for now and relies on nightly versions of Firefox and Chrome for the VR API being developed.
Android Chrome has severe bugs with rendering video textures in WebGL. These are currently being worked out with Chromium but the meantime this will only work in Firefox Chrome.
Android Chrome Dev support may become available once this bug is fixed and then may make it into production shortly after once it stablises.
Firefox has bugs with mobile orientation support therefore Google Cardboard VR viewing mode has issues with positioning the rotation and panning correctly.

More Information:

Home


http://www.video-stitch.com/
http://www.kolor.com/
http://www.panocam3d.com/software.html

(Current Version 6.0)
Compatibility

Flowplayer 6.0 and above

Demo

Contact for a site demo download.
This plugin is in beta and will be available shortly.

!(function () {

var player = flowplayer(“#player”, {
vrvideo: {
//force testing of vr glasses on desktop
forcevr: true
//headtracker: true
},
clip: {
vrsources: [
// initial flat plane source for Safari and IE due to standards issues.
{type: “video/mp4”, src: “//videos.electroteque.org/bitrate/big_buck_bunny_600k.mp4”},
// proxy source for Safari and IE
{type: “video/mp4”, src: “//flowplayer.electroteque.org/video/360/ultra_light_flight_720p.mp4”}
],
sources: [

{type: “video/webm”, src: “//videos.electroteque.org/360/ultra_light_flight_720p.mp4”},
//{type: “video/webm”, src: “test.webm”},
// {type: “video/webm”, src: “//videos.electroteque.org/bitrate/big_buck_bunny_600k.webm”},
{type: “video/mp4”, src: “//videos.electroteque.org/360/ultra_light_flight_720p.webm”},
{type: “video/ogg”, src: “//videos.electroteque.org/360/ultra_light_flight_720p.ogv”}
]
}

});

})();

Configuration
property / datatype default description
vr
boolean
true Enable 360 video and VR glasses support. For Stereoscopic side by side video disable this.
forcevr
boolean
false Force VR glasses support for desktop browsers or else the feature will only be enabled for mobile devices for now.
anaglyph
boolean
false Enable 3D anaglyph effects support.
stereoscopic
boolean
false Enable side by side stereoscopic support. This is like the VR glasses stereo view but without glasses distortion for 3D enabled stereoscopic devices.
mouseDamping
int
0.25 The sensitivity of the mouse controls.
keyDamping
int
0.10 The sensitivity of the key controls. A lower value means more smoother.
Playlist Config

To configure playlists between vr videos and standard videos the plugin will detect for the existance of either a `vrsources` config for Safari fallback urls or a `vr` config.

playlist: [
//normal video
{
sources: [
{type: “video/mp4”, src: “//videos.electroteque.org/bitrate/big_buck_bunny_600k.mp4”},
]
},
//vr video with vrsources config
{
vrsources: [
// initial flat plane source for Safari and IE due to standards issues.
{type: “video/mp4”, src: “//videos.electroteque.org/bitrate/big_buck_bunny_600k.mp4”},
// proxy source for Safari and IE
{type: “video/mp4”, src: “//flowplayer.electroteque.org/video/360/ultra_light_flight_720p.mp4”}
],
sources: [

{type: “video/webm”, src: “//videos.electroteque.org/360/ultra_light_flight_720p.webm”},
{type: “video/mp4”, src: “//videos.electroteque.org/360/ultra_light_flight_720p.mp4”},
{type: “video/ogg”, src: “//videos.electroteque.org/360/ultra_light_flight_720p.ogv”}
]
}
]

For same domain videos the `vrsources` is not required so use the `vr` config.

playlist: [
//normal video
{
sources: [
{type: “video/mp4”, src: “//videos.electroteque.org/bitrate/big_buck_bunny_600k.mp4”},
]
},
//vr video with vrsources config
{
vr: true,
sources: [

{type: “video/webm”, src: “//videos.electroteque.org/360/ultra_light_flight_720p.webm”},
{type: “video/mp4”, src: “//videos.electroteque.org/360/ultra_light_flight_720p.mp4”},
{type: “video/ogg”, src: “//videos.electroteque.org/360/ultra_light_flight_720p.ogv”}
]
}
]

Playlist Example

This example demonstrates of multiple 360 videos within a playlist.

Each item requires the fallback source for Safari and IE browsers.

spaceplay / pause

qunload | stop

ffullscreen

shift + ←→slower / faster

↑↓volume

mmute

←→seek

. seek to previous

12… 6 seek to 10%, 20% … 60%

!(function () {

flowplayer(“#playlist”, {
playlist: [
{
vrsources: [
// initial flat plane source for Safari and IE due to standards issues.
{type: “video/mp4”, src: “//videos.electroteque.org/bitrate/big_buck_bunny_600k.mp4”},
// proxy source for Safari and IE
{type: “video/mp4”, src: “//flowplayer.electroteque.org/video/360/ultra_light_flight_720p.mp4”}
],
sources: [

{type: “video/webm”, src: “//videos.electroteque.org/360/ultra_light_flight_720p.webm”},
{type: “video/mp4”, src: “//videos.electroteque.org/360/ultra_light_flight_720p.mp4”},
{type: “video/ogg”, src: “//videos.electroteque.org/360/ultra_light_flight_720p.ogv”}
]
},
{

vrsources: [
// initial flat plane source for Safari and IE due to standards issues.
{type: “video/mp4”, src: “//videos.electroteque.org/bitrate/big_buck_bunny_600k.mp4”},
// proxy source for Safari and IE
{type: “video/mp4”, src: “//flowplayer.electroteque.org/video/360/dragster_4k_720p.mp4”}
],
sources: [

{type: “video/webm”, src: “//videos.electroteque.org/360/dragster_4k_720p.webm”},
{type: “video/mp4”, src: “//videos.electroteque.org/360/dragster_4k_720p.mp4”},
{type: “video/ogg”, src: “//videos.electroteque.org/360/dragster_4k_720p.ogv”}
]
},
{

vrsources: [
// initial flat plane source for Safari and IE due to standards issues.
{type: “video/mp4”, src: “//videos.electroteque.org/bitrate/big_buck_bunny_600k.mp4”},
// proxy source for Safari and IE
{type: “video/mp4”, src: “//flowplayer.electroteque.org/video/360/drone_flight_over_las_vegas_720p.mp4”}
],
sources: [

{type: “video/webm”, src: “//videos.electroteque.org/360/drone_flight_over_las_vegas_720p.webm”},
{type: “video/mp4”, src: “//videos.electroteque.org/360/drone_flight_over_las_vegas_720p.mp4”},
{type: “video/ogg”, src: “//videos.electroteque.org/360/drone_flight_over_las_vegas_720p.ogv”}
]
}
]

});
})();

3D Anaglyph Example

This example demonstrates an anaglyph filter which could be used for for normal flat projection videos also.

spaceplay / pause

qunload | stop

ffullscreen

shift + ←→slower / faster

↑↓volume

mmute

←→seek

. seek to previous

12… 6 seek to 10%, 20% … 60%

wpan up

xpan down

apan left

dpan right

!(function () {

flowplayer(“#threed”, {
vrvideo: {
anaglyph: true
},
clip: {
vrsources: [
// initial flat plane source for Safari and IE due to standards issues.
{type: “video/mp4”, src: “//videos.electroteque.org/bitrate/big_buck_bunny_600k.mp4”},
// proxy source for Safari and IE
{type: “video/mp4”, src: “//flowplayer.electroteque.org/video/360/ultra_light_flight_720p.mp4”}
],
sources: [
{type: “video/webm”, src: “//videos.electroteque.org/360/ultra_light_flight_720p.webm”},
{type: “video/mp4”, src: “//videos.electroteque.org/360/ultra_light_flight_720p.mp4”},
{type: “video/ogg”, src: “//videos.electroteque.org/360/ultra_light_flight_720p.ogv”}
]
}

});

})();

3D Stereoscopic Example

This example demonstrates playing 2D video rendered as side by side stereoscopic.

Enable the `stereoscopic` property and disable the `vr` property. set the player style `is-stereo`

vrvideo: {
stereoscopic: true,
vr: false
},

spaceplay / pause

qunload | stop

ffullscreen

shift + ←→slower / faster

↑↓volume

mmute

←→seek

. seek to previous

12… 6 seek to 10%, 20% … 60%

wpan up

xpan down

apan left

dpan right

!(function () {

flowplayer(“#stereo”, {
vrvideo: {
stereoscopic: true,
vr: false
},
clip: {
vrsources: [
// proxy source for Safari and IE
{type: “video/mp4”, src: “//flowplayer.electroteque.org/video/bitrate/big_buck_bunny_600k.mp4”}
],
sources: [
{type: “video/webm”, src: “//videos.electroteque.org/bitrate/big_buck_bunny_600k.webm”},
{type: “video/mp4”, src: “//videos.electroteque.org/bitrate/big_buck_bunny_600k.mp4”},
{type: “video/ogg”, src: “//videos.electroteque.org/bitrate/big_buck_bunny_600k.ogv”}
]
}

});

})();