Documentation

Getting Started

The stereosense player is built with flexible web technology and enables you to showcase your 360° video and photo content in all browsers, regardless if on desktop or on mobile. You’ll only need basic HTML markup and you’re set to go. Everything comes out of the box and there’s no additional programming needed. You can integrate it with your self hosted content and let your users experience 360° on web, mobile and in all VR headsets.

Adding the script

Once you’ve set up a free account, we’ll automatically generate a unique public key for your player.
To get started you need to add the javascript player-snippet before the closing </body> tag of your HTML markup.

<script src="https://embed360.stereosense.com/playerjs/?apikey=API_KEY"></script>

Adding a player

Once the script is added you can easily add embed markup to your content. Just add a <div> with the "stereosense-embed" class and include all absolute URLs to your media sources.

The data attribute "data-quality" determines which quality is provided. Currently "ios", "sd" and "hd" are available, you need an "sd" version to make it work. Image formats can be included with data-format="image".

Steroscopic media needs to be in a top-bottom format and be activated with the "isstereo" data-attribut.

<div class="stereosense-embed">
  <source href="http://www.example.com/quality-ios.mp4" data-quality="ios" />
  <source href="http://www.example.com/quality-sd.mp4" data-quality="sd" />
  <source href="http://www.example.com/quality-hd.mp4" data-quality="hd" />
</div>
<div class="stereosense-embed">
  <source href="http://www.example.com/panorama.jpg" data-format="image" />
</div>

Player options

Each player <div> is configurable by various data attributes eg. to set a designated thumbnail. Please provide a thumbnail in reasonable size, depending on the size of the player on your website. The string needs to be an absolute path to your image file.
You can also let the play start the video in fullscreen or VR mode automatically (VR mode only on mobile) or add a call-to-action button to your video.

<div class="stereosense-embed" 
     data-isstereo="true"
     data-thumbnail="http://www.example.com/thumbail.jpg"
     data-autoplay="true"
     data-loop="true"
     data-controls="false">
  <source href="http://www.example.com/quality-ios.mp4" data-quality="ios" />
  <source href="http://www.example.com/quality-sd.mp4" data-quality="sd" />
  <source href="http://www.example.com/quality-hd.mp4" data-quality="hd" />
</div>

Controlling usage

Within your user account you have the possibility of determining where your player is allowed to be integrated and used.

You can opt between making it universally available or even whitelist selected domains.

Customizing the player

Within the dashboard, you have the option of branding the player by replacing the standard stereosense watermark with your own logo.

After integrating the player, you can define the size of your embeds quickly and effortlessly with CSS. Please note that the default player size is 100% of its containter, so if you do not specify any hight for the player it might be 0 and not visible.

<style>
  .stereosense-embed {
    max-width: 800px;
    height: 335px;
    width: 100%;
  }
</style>

Video formats

To use the stereosense VR player for free, you’ll need to integrate it with your own hosting and streaming solution. The standard video quality support of the player is limited to: iOS, SD and HD. For normal functionality you’ll need to provide at least an SD content format.

The reccomended video format is MP4 with H264 codec and max. 30fps, but other formats work too. We’re working hard to enable HLS and MPEG-DASH support as soon as possible.

Here are our recommended resolutions:

iOS: 1024x512
SD:  1920x1080
HD:  3840x1920

Cross-Origin recommendation

Please host your videos on the same domain as the website(s) where the player is being used to make it work. If you need to host your videos on a different domain, please serve them over HTTPS and add CORS support to your server with the videos. Alternativley put our stereosense_cors.html file on the server with the videos and add the domain to the CORS list in the dashboard. Different quality versions need to be on the same server.

Cross-Origin Resource Sharing resources:

 CORS tutorials
stereosense_cors.html (login to download)

Hosting and encoding service

You can also use our drag&drop hosting and encoding service: embed360.stereosense.com
Encoding and streaming infrastructure included. Try it for free, choose a hosting plan later. Cancel anytime.

Embed 360° service
Try it for free

Made with ☕  and ♥ in The Metaverse.