360° Video Player with Gyroscope Support
The rooom 360° Video Player is a specialized tool for displaying immersive 360-degree video content with advanced gyroscope support and VR capabilities. This lightweight player enables you to create engaging panoramic video experiences that work seamlessly across desktop, mobile, and VR devices.
Overview
The 360-player provides a complete solution for embedding and displaying 360-degree videos on your website or application. With built-in gyroscope support, users can naturally navigate the video by moving their device, creating an intuitive and immersive viewing experience. The player also supports VR mode for compatible headsets, making it perfect for virtual tours, event recordings, and immersive storytelling.
Key Features
- Gyroscope Integration: Natural navigation using device orientation sensors
- VR Mode Support: Compatible with VR headsets for fully immersive experiences
- Responsive Design: Works seamlessly on desktop, mobile, and tablet devices
- Customizable Interface: Adjust colors, logos, and controls to match your brand
- Multiple Video Formats: Support for monoscopic, horizontal, and vertical 360° videos
- Quality Switching: Provide both standard and high-quality video sources
- Easy Embedding: Simple iframe integration for any website
Getting started
Open the url in your browser and set an 360-degree video file for the GET-parameter source.https://360player.rooom.io/?source=https://path.to/video.mp4
ExampleTry the 360° player with sample video
Customization
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| source | string | '' | REQUIRED URL for 360° video source |
| sourceHQ | string | '' | URL for high quality 360° video source |
| videoType | string | monoscopic | Video type (monoscopic or horizontal or vertical) |
| volume | number | 1 | Sound volume from 0...1 |
| muted | boolean | true | Mute the video initially |
| loop | boolean | true | Loop video playback |
| fov | number | 45 | Field of view (in degree) |
| rotation | number | 180 | Initial horizontal rotation (in degree) |
| sensors | boolean | true | Enable sensor based orientation |
| vr | boolean | true | Enable vr mode (needs sensors too) |
| camera | string | free | Default camera mode on startup (free or sensors or vr) |
| extraPanning | boolean | true | Enable horizontal panning in sensor or vr mode |
| showLogo | boolean | true | Show Logo |
| logo | string | '' | URL for logo image. Default: rooom logo |
| logoUrl | string | '' | URL for logo link |
| preview | string | '' | URL for preview image |
| primaryColor | string | '' | Hex-code for primary color (eg. 00AEB3). Default: Uses rooom colorscheme |
| theme | string | light | Force Theme to be light, dark or auto |
Embed player
This code snippet can be used to embed the 360-player into other web pages.
<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>