Skip to content

360° Video Player

To display 360-degree videos with gryosensor support, there exists the 360-player.

Example player

Getting started

Open the url in your browser and set an 360-degree video file for the source GET-parameter: https://360player.rooom.io/?source=https://path.to/video.mp4

Example
https://360player.rooom.io/?source=https://cdn.bitmovin.com/content/assets/playhouse-vr/progressive.mp4

Customization

Parameters

NameTypeDefaultDescription
sourcestring''REQUIRED URL for 360° video source
sourceHQstring''URL for high quality 360° video source
videoTypestringmonoscopicVideo type (monoscopic or horizontal or vertical)
volumenumber1Sound volume from 0...1
mutedbooleantruemute the video initially
loopbooleantrueloop video playback
fovnumber45field of view in degree
rotationnumber180initial horizontal rotation in degrees
sensorsbooleantrueenable sensor based orientation
vrbooleantrueenable vr mode (needs sensors to be enabled too)
camerastringfreedefault camera mode on startup (free or sensors or vr)
extraPanningbooleantrueenable horizontal panning in sensor or vr mode
showLogobooleantrueShow Logo
logostring''URL for logo image. Shows rooom logo if unspecified
logoUrlstring''URL for logo link
previewstring''URL for preview image
primaryColorstring''Hex-code for primary color (eg. 00AEB3). Uses rooom colorscheme if unspecified
themestringlightForce Theme to be light, dark or auto

Embed player

This code snippet can be used to embed the 360-player into other web pages.

html

<iframe
  id="rooom-360-player"
  title="rooom-viewer"
  frameborder="0"
  allowvr="yes"
  allow="vr"
  allowfullscreen=""
  mozallowfullscreen="true"
  webkitallowfullscreen="true"
  xr; accelerometer; magnetometer; gyroscope; autoplay
  src="https://360player.rooom.io/
        ?source=https://cdn.bitmovin.com/content/assets/playhouse-vr/progressive.mp4
        &ui_color=003245"
>
</iframe>

Last updated: