360 Video and Virtual Reality in v 2.x

Introduction

360 degree video is a type of video where every angle from a single viewpoint is recorded and can played back. It offers a great sense of immersion for panoramic imagery or simulation purposes.

THEOplayer allows you to render these videos in your browser or on your mobile device, with a full set of API controls to control the viewing direction.

Next to the spherical or 360° video playback, THEOplayer also offers integration with VR devices through stereoscopic view, dubbed "stereo mode".

Usage

To indicate that your stream contains 360° content, pass a valid VRConfiguration as vr property when setting player.source.

For the full list of properties and events related to 360° video and VR, go to our API page.

Examples

Set THEOplayer to start in 360

var element = document.querySelector('.theoplayer');
var player = new THEOplayer.Player(element, {
    fluid: true
});

player.source = { 
    sources: { 
        type : 'application/x-mpegurl',
        src : 'http://example.com/example-stream.m3u8'
    },
    vr: {
        360: true
    }
};

Manipulating the viewing direction within a 360 video

Below you can find an example querying the VR viewing direction and one setting the viewing direction.

/* reading the current position */
var currentViewingDirection = player.vr.direction; // e.g. {pitch: 0, yaw: 0, roll: 0}
/* setting the position */
player.vr.direction = {pitch: 0, yaw: 180, roll: 0};

/* example of how you can update only one direction property */
var currentViewingDirection = player.vr.direction; /* e.g. {pitch: 0, yaw: 30, roll: 0} */
currentViewingDirection.pitch = 180; /* {pitch: 180, yaw:30, roll: 0} */
player.vr.direction = currentViewingDirection;

Listening to "stereochange" events

The following code sample listens to stereochange events thrown by THEOplayer and stores the new stereo mode in a variable.

player.vr.addEventlistener('stereochange', function() {
    var isStereoEnabled = player.vr.stereo; // (boolean)
// do something with it });

Support Table

This feature is supported on:

Internet Explorer 10+

Internet Explorer 11

Firefox

Firefox

Chrome

Chrome

Safari

Safari

Opera

Opera

Edge

Edge

Windows Phone

Windows Phone*

Android

Android

iOS

iOS**

Vivaldi

Vivaldi

* supported on the latest version
** not supported for CORS sources