Skip to main content

360°-Player

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

Getting started

Open the url in your browser and set an 360 degree video file for the source parameter:

https://static.rooom.com/player-360?source=https://...

Example

https://static.rooom.com/player-360/?source=https://more.rooom.com/documentation/360player/example_1080p.mp4

iOS Sandbox Workaround

For iOS and cross-site iframe use additional js script, to get the gyrosensor information from the device.

<script src="https://static.rooom.com/player-360/js/rooom360player.js"></script>

<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://static.rooom.com/player-360/
?source=https://static.rooom.com/player-360/assets/video/example_1080p.mp4
&amp;ui_color=003245
&amp;ui_background=https://static.rooom.com/player-360/assets/images/Background.jpg
&amp;ui_logo_url=https://static.rooom.com/player-360/assets/images/logo.png
&amp;ui_logolink_url=https://www.company.com"
>
</iframe>

Parameters

NameTypeDefaultDescription
sourcestringREQUIREDSetting to an absolute url for the 360 degree video source.
volumenumber1Setting from 0...1 adjusts the sound volume.
fovnumber0.8Setting the camera field-of-view as radiant. 0.8 is approximately 45 degree.
loopbooleantrue Loop video playback
rotationnumber180Initial horizontal rotation of video dome
camera_modestringfreeCamera type free or gyro (Gets the orientation from device)
gyro_extrapanningbooleantrueAllow additional horizontal panning while in gyro mode
fadeinbooleantrueSmooth fade in video
ui_logobooleantruefalse Hides the logo in the top left corner
ui_logo_urlstring''Absolute url, change logo in the top left corner. Default is the rooom logo.
ui_logolink_urlstring''Anchor link on logo click as absolute url
ui_backgroundstring2A313E,404652One hexcode - solid color(2A313E) two hexcodes - gradient color (2A313E,404652 ) absolute url of background image (https://...)
ui_colorstring00AEB3Hexcode button color.
ui_icon_colorstringFFFFFFHexcode icon and text color