# VideoPlugin Styles

NPM version NPM Downloads jsDelivr Hits
API Documentation

Adds controls to the video adapters.

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

# Usage

To use this plugin you must also load one of the video adapters : equirectangular or cubemap.

Once enabled it will add various elements to the viewer:

  • Play/pause button
  • Volume button
  • Time indicator in the navbar
  • Progressbar above the navbar
  • Play button in the center of the viewer

It also supports advanced autorotate with timed keypoints.

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

# Example

# Configuration

# keypoints

  • type: Array<{ position, time }>
  • updatable: no, use setKeypoints() method

Defines timed keypoints that will be used by the autorotate button.

keypoints: [
    { time: 0, position: { yaw: 0, pitch: 0 } },
    { time: 5.5, position: { yaw: 0.25, pitch: 0 } },
    { time: 12.8, position: { yaw: 0.3, pitch: -12 } },
];

WARNING

The usage of keypoints requires to load the Autorotate plugin.

# progressbar

  • type: boolean
  • default: true
  • updatable: no

Displays a progressbar on top of the navbar.

# bigbutton

  • type: boolean
  • default: true
  • updatable: no

Displays a big "play" button in the center of the viewer.

# lang

  • type: object
  • default:
lang: {
  videoPlay: 'Play/Pause',
  videoVolume: 'Volume',
}

Note: this option is not part of the plugin but is merged with the main lang object.

# Multi resolution

You can offer multiple resolutions of your video with the ResolutionPlugin.

const viewer = new PhotoSphereViewer.Viewer({
    adapter: PhotoSphereViewer.EquirectangularVideoAdapter,
    plugins: [
        PhotoSphereViewer.VideoPlugin,
        PhotoSphereViewer.SettingsPlugin,
        [PhotoSphereViewer.ResolutionPlugin, {
            defaultResolution: 'FHD',
            resolutions: [
                {
                    id: 'UHD',
                    label: 'Ultra high',
                    panorama: { source: 'path/video-uhd.mp4' },
                },
                {
                    id: 'FHD',
                    label: 'High',
                    panorama: { source: 'path/video-fhd.mp4' },
                },
                {
                    id: 'HD',
                    label: 'Standard',
                    panorama: { source: 'path/video-hd.mp4' },
                },
            ],
        }],
    ],
});

# Methods

# setKeypoints(keypoints)

Changes the keypoints.

# Events

# play-pause(playing)

Triggered when the video starts playing or is paused.

# volume-change(volume)

Triggered when the video volume changes.

# progress(time, duration, progress)

Triggered when the video play progression changes.

# Buttons

This plugin adds buttons to the default navbar:

  • videoPlay allows to play/pause the video
  • videoVolume allows to change the volume/mute the video
  • videoTime shows the video time and duration (not a real button)

If you use a custom navbar you will need to manually add the buttons to the list.