# VideoPlugin Styles
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 videovideoVolume
allows to change the volume/mute the videovideoTime
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.