Version: 2.67.0

How to use?

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
});