360 Video and Virtual Reality in v 1.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".

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

Configuration options

For the configuration of playback rates in THEOplayer, the following configuration options are available:

Attribute Type Optional Description
360 boolean yes Specifies whether this source contains 360° video content.
stereoMode 'vertical' OR 'horizontal' OR null yes Specifies whether this source contains stereoscopic video content. The following values are supported:
  • 'horizontal': The two viewpoints are in a side-by-side layout. The view for the left eye is in the left half of the video frame, the view for the right eye is in the right half of the video frame.
  • 'vertical': The two viewpoints are in a top-bottom layout. The view for the left eye is in the upper half of the video frame, the view for the right eye is in the lower half of the video frame.
  • null: The source does not have stereoscopic content.
The default value is null.

Before you can use these features, you need to include the THEOplayer VR library, next to the playback library.

<script type="text/javascript" src="/link/to/theoplayer.js"></script>

 <!-- Only for v 1.x --<
<script type="text/javascript" src="/link/to/theoplayer.vr.js"></script>

Examples

Set THEOplayer to start in 360

Setting up VR in THEOplayer v 1.x

theoplayer.player(0).setSource({
    sources: "bigbuckbunny.m3u8",
    configuration: {
        vr: {
            360: true
        }
    }
});

Setting up VR in THEOplayer v 2.x:

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.

var currentViewingDirection = theoplayer.player(0).vr.direction; // e.g. {pitch: 0, yaw: 0, roll: 0}
theoplayer.player(0).vr.direction = {pitch: 0, yaw: 180, roll: 0};

Listening to "stereochange" events

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

theoplayer.player(0).vr.addEventlistener('stereochange', function() {
    var isStereoEnabled = theoplayer.player(0).vr.stereo // e.g. "true"
});

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