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

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

• Firefox
• Chrome (including Chromium based browsers like Brave & Opera)
• Microsoft Edge
• Safari

🚀 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.
• 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	Use the browser's fullscreen 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