/html-360-viewer

A lightweight, browser-based viewer for 360-degree images and videos. No additional setup required, just open the HTML file in any modern browser.

Primary LanguageHTMLMIT LicenseMIT

360° Image & Video Viewer

A lightweight, browser-based viewer for 360-degree images and videos. No additional setup required, just open the HTML file in any modern browser.

Try it out here: https://progamergov.github.io/html-360-viewer

Supports:

  • 360° panoramic images, most formats supported by browsers, like JPEG (includes '.jpg'), PNG, WebP, etc.
  • 360° videos in .mp4 and .webm format. Works as a 360 video player.
  • Monoscopic 360 images and stereo images in top-bottom and left-right layouts

🧪 Compatibility

Works on all major web browsers that A-Frame supports.

Works on all VR headsets supported by A-Frame.

🚀 Features

  • Drag & Drop support for instant media viewing
  • Stereo toggle switch between monoscopic and stereo images (mono/top-bottom/side-by-side)
  • Zooming via mouse wheel or pinch gesture
  • Interactive panning with mouse or touch
  • Fullscreen mode via the bottom right button. Opens in VR headset if supported.
  • Screenshot functionality (UI hidden in capture)
  • Video controls: play/pause, timeline slider

📦 Getting Started

Option 1 – Local Use

  1. Download or clone this repository.
  2. Open viewer360.html in your browser.
  3. Drag and drop a supported 360° image or video file, or click "Select Media" to browse.

Option 2 – Web Demo

  1. Visit the live demo in your browser.
  2. Upload a 360° image or video to start viewing.

Option 3 – Local Copy

  1. Copy the full contents of viewer360.html into a new text file.
  2. Rename the file to something like viewer360.html (make sure it ends in .html).
  3. Open it in your browser.

🕹️ Controls

Action How to Use
Pan View Left-click + drag or touch + drag
Zoom Mouse wheel or pinch gesture
Fullscreen Browser fullscreen and VR headset control
Stereo Toggle Bottom-left "Stereo" button
Screenshot Camera icon at bottom center
Upload/Reset Media "Upload" button below controls
Play/Pause Video Play/pause button on video controls
Seek in Video Use the timeline slider

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

🔬 Citation

If you use this library in your research or project, please refer to the included CITATION.cff file or cite it as follows:

BibTeX

@misc{egan2025html360viewer,
  title={Browser-Based Viewer for 360 Images and Videos},
  author={Egan, Ben},
  year={2025},
  publisher={GitHub},
  howpublished={\url{https://github.com/ProGamerGov/html-360-viewer}}
}

APA Style

Egan, B. (2025). Browser-Based Viewer for 360 Images and Videos [Computer software]. GitHub. https://github.com/ProGamerGov/html-360-viewer