360 Video and Virtual Reality in v 2.x


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


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.


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 35+


Chrome 8+


Safari 10+


Opera 15+



Windows Phone

Windows Phone*







* supported on the latest version
** iPhone support requires iOS 10 or higher
** see considerations for cross-origin limitations