Panorama module#

The Panorama module is a TypeScript-based enhancement for integrating 360° video playback with support for multiple video types, including:

• Equirectangular
• Fisheye
• 3D Video
• Dual Fisheye

It includes a button for enabling Cardboard-VR mode, delivering an immersive viewing experience.

Leveraging the THREE.js library, a custom WebGL-based canvas renders the video source as a panoramic view. Developers can easily customize playback and interaction settings to suit diverse use cases.

Limitations#

The module is incompatible with the Podcast module, audio-only mode, or the audio tag. Any of these configurations will prevent the module from functioning as intended.

Customization Options#

You can configure the following options to tailor the video experience:

• clickAndDrag: Enables video rotation on drag-and-drop instead of mouse rollover.
• showNotice: Displays an instructional message to guide users about interacting with the video.
• initFov: Sets the initial field of view for the video.
• maxFov / minFov: Define the range of zoom levels for the video.
• initLat / initLon: Configure the initial camera position with latitude and longitude angles.
• backToVerticalCenter / backToHorizonCenter: Automatically return to center alignment when interaction stops.
• VREnable: Displays a VR button to toggle Cardboard-VR mode.
• videoType: Specify the type of video (e.g., 'equirectangular', 'fisheye', '3dVideo', 'dual_fisheye').
• NoticeMessage: Customize the instructional message text or use an HTML element for rich content.
• autoHideNotice: Sets the duration (in milliseconds) for which the instructional message is displayed.
• scrollable: Allows users to scroll within the video for additional navigation.
• returnStepLat / returnStepLon: Configure the speed at which the view returns to vertical or horizontal center when auto-centering is enabled.
• clickToToggle: Enables toggling video play/pause by clicking.
• minLat / maxLat: Define the minimum and maximum latitude for camera angles.
• minLon / maxLon: Set the longitude angle range.
• rotateX / rotateY / rotateZ: Specify initial rotation angles for the video view around the respective axes.
• autoMobileOrientation: Automatically adjusts the video based on mobile device orientation.
• mobileVibrationValue: Sensitivity of vibration-based video interactions on mobile devices.
• VRGapDegree: Sets the gap degree for VR mode to optimize viewing comfort.
• closePanorama: Indicates whether the panorama view should be closed.
• helperCanvas: Configure a helper canvas for rendering support.
• dualFish: Set parameters for dual fisheye layouts, including circle and layout configurations.

For more information see type interface

Example#

window.initPlayer('my-video', {
  sources: [
    {
      src: '/assets/fisheye.mp4',
      type: 'video/mp4',
    },
  ],
  panoramaPlugin: {
    videoType: 'fisheye',
    maxLat: -10,
    initLat: -10,
    initLon: -270,
    rotateX: -Math.PI,
  },
})