Equirectangular video

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

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

WARNING

This adapter requires to use the VideoPlugin.

Example

title: PSV Equirectangular Video Demo
packages:
    - name: equirectangular-video-adapter
      imports: EquirectangularVideoAdapter
    - 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: [EquirectangularVideoAdapter, {
        muted: true,
    }],
    caption: 'Ayutthaya <b>&copy; meetle</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 + 'equirectangular-video/Ayutthaya_UHD.mp4' },
                },
                {
                    id: 'FHD',
                    label: 'High',
                    panorama: { source: baseUrl + 'equirectangular-video/Ayutthaya_FHD.mp4' },
                },
                {
                    id: 'HD',
                    label: 'Standard',
                    panorama: { source: baseUrl + 'equirectangular-video/Ayutthaya_HD.mp4' },
                },
                {
                    id: 'SD',
                    label: 'Low',
                    panorama: { source: baseUrl + 'equirectangular-video/Ayutthaya_SD.mp4' },
                },
            ],
        }],
    ],
});

Configuration

autoplay

• type: boolean
• default: false

Automatically starts the video on load.

muted

• type: boolean
• default: false

Mute the video by default.

resolution

See the equirectangular adapter configuration.

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.