Cubemap video

This adapter is available in the @photo-sphere-viewer/cubemap-video-adapter (opens new window) package.

const viewer = new PhotoSphereViewer.Viewer({
    adapter: PhotoSphereViewer.CubemapVideoAdapter,
    panorama: {
        source: 'path/video.mp4', // also supports webm
    },
    plugins: [PhotoSphereViewer.VideoPlugin],
});

WARNING

This adapter requires to use the VideoPlugin.

Example

title: PSV Cubemap Video Demo
packages:
    - name: cubemap-video-adapter
      imports: CubemapVideoAdapter
    - name: video-plugin
      imports: VideoPlugin
      style: true
    - name: settings-plugin
      imports: SettingsPlugin
      style: true
    - name: resolution-plugin
      imports: ResolutionPlugin

const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';

const viewer = new Viewer({
    container: 'viewer',
    adapter: [CubemapVideoAdapter, {
        muted: true,
    }],
    caption: 'Dreams of Dalí <b>&copy; The Dalí Museum</b>',
    loadingImg: baseUrl + 'loader.gif',
    touchmoveTwoFingers: true,
    mousewheelCtrlKey: true,
    navbar: 'video caption settings fullscreen',

    plugins: [
        VideoPlugin,
        SettingsPlugin,
        [ResolutionPlugin, {
            defaultResolution: 'HD',
            resolutions: [
                {
                    id: 'UHD',
                    label: 'Ultra high',
                    panorama: { source: baseUrl + 'cubemap-video/DreamOfDali_UHD.webm' },
                },
                {
                    id: 'FHD',
                    label: 'High',
                    panorama: { source: baseUrl + 'cubemap-video/DreamOfDali_FHD.webm' },
                },
                {
                    id: 'HD',
                    label: 'Standard',
                    panorama: { source: baseUrl + 'cubemap-video/DreamOfDali_HD.webm' },
                },
            ],
        }],
    ],
});

Positions definitions

This adapter does not support pixel positions, only yaw+pitch.

Configuration

autoplay

• type: boolean
• default: false

Automatically starts the video on load.

muted

• type: boolean
• default: false

Mute the video by default.

Panorama options

When using this adapter, the panorama option and the setPanorama() method accept an object to configure the video.

source (required)

• type: string

Path of the video file. The video must not be larger than 4096 pixels or it won't be displayed on handled devices.

equiangular

• type: boolean
• default: true

Set to true when using an equiangular cubemap (EAC), which is the format used by Youtube. Set to false when using a standard cubemap.

Video format

This adapter supports video files consisting of a grid of the six faces of the cube, as used by Youtube for example.

The layout of a frame must be as follow: