Photo Sphere Viewer 4

# Cubemap video

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
resources:
  - path: adapters/cubemap-video.js
    imports: CubemapVideoAdapter
  - path: plugins/video.js
    imports: VideoPlugin
  - path: plugins/video.css
  - path: plugins/settings.js
    imports: SettingsPlugin
  - path: plugins/settings.css
  - path: plugins/resolution.js
    imports: ResolutionPlugin

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

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

  plugins: [
    PhotoSphereViewer.VideoPlugin,
    PhotoSphereViewer.SettingsPlugin,
    [PhotoSphereViewer.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' },
        },
      ]
    }]
  ],
});

# Configuration

# autoplay

Automatically starts the video on load.

# muted

Mute the video by default.

# equiangular

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

# Panorama options

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

# source (required)

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

# 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:

cubemap-video

← Little planet →