Skip to main content
The cubemap video adapter loads video files where each frame contains a 3×2 grid of cubemap faces, as used by YouTube for 360° videos.
This adapter requires the VideoPlugin to be enabled.

​
Installation

npm install @photo-sphere-viewer/cubemap-video-adapter

​
Usage

import { CubemapVideoAdapter } from '@photo-sphere-viewer/cubemap-video-adapter';
import { VideoPlugin } from '@photo-sphere-viewer/video-plugin';

const viewer = new Viewer({
    adapter: CubemapVideoAdapter,
    panorama: {
        source: 'path/video.mp4',
    },
    plugins: [VideoPlugin],
});
This adapter does not support pixel positions. Use yaw + pitch for all position references.

​
Adapter configuration

​
autoplay
boolean
default:"false"
Automatically starts the video when the panorama is loaded.
​
muted
boolean
default:"false"
Mutes the video by default.

​
Panorama options

The panorama option and the setPanorama() method accept an object with the following fields.
​
source
string | MediaStream | HTMLVideoElement
required
The video source. Can be:
  • A URL string pointing to the video file. The video must not exceed 4096 pixels in either dimension.
  • A MediaStream — for example, the feed from a USB 360° camera.
  • An HTMLVideoElement — when you need full control over video playback externally.
​
equiangular
boolean
default:"true"
Set to true when using an equiangular cubemap (EAC) — the format used by YouTube. Set to false when using a standard cubemap layout.

​
Video format

Each frame of the video must contain all six cube faces arranged in a 3-column × 2-row grid:
LeftFrontRight
BottomBackTop
This is the layout produced by YouTube’s 360° video pipeline. If your source uses a different layout, ensure your video is re-encoded to match before using this adapter.

Build docs developers (and LLMs) love

Get started for freeTalk to us