https://github.com/progamergov/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.
https://github.com/progamergov/html-360-viewer
360 360-degree 360-image 360-photo 360-video 360-viewer 360vr equirectangular html image-sphere pano panorama photo-sphere-viewer spherical-photo viewer virtual-reality vr vr360
Last synced: 2 months ago
JSON representation
A lightweight, browser-based viewer for 360-degree images and videos. No additional setup required, just open the HTML file in any modern browser.
- Host: GitHub
- URL: https://github.com/progamergov/html-360-viewer
- Owner: ProGamerGov
- License: mit
- Created: 2025-05-12T18:02:56.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-12-13T20:21:01.000Z (4 months ago)
- Last Synced: 2026-01-28T01:09:33.181Z (3 months ago)
- Topics: 360, 360-degree, 360-image, 360-photo, 360-video, 360-viewer, 360vr, equirectangular, html, image-sphere, pano, panorama, photo-sphere-viewer, spherical-photo, viewer, virtual-reality, vr, vr360
- Language: HTML
- Homepage: https://progamergov.github.io/html-360-viewer/
- Size: 1.65 MB
- Stars: 20
- Watchers: 1
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: ReadMe.md
- License: LICENSE
- Citation: CITATION.cff
Awesome Lists containing this project
README
# 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](https://en.wikipedia.org/wiki/JPEG) (includes '.jpg'), [PNG](https://en.wikipedia.org/wiki/PNG), [WebP](https://en.wikipedia.org/wiki/WebP), etc.
* 360° **videos** in [.mp4](https://en.wikipedia.org/wiki/MP4_file_format) and [.webm](https://en.wikipedia.org/wiki/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](https://aframe.io/docs/1.7.0/introduction/faq.html) supports.
* [Firefox](https://en.wikipedia.org/wiki/Firefox)
* [Chrome](https://en.wikipedia.org/wiki/Google_Chrome) (including Chromium based browsers like [Brave](https://en.wikipedia.org/wiki/Brave_(web_browser)) & [Opera](https://en.wikipedia.org/wiki/Opera_(web_browser)))
* [Microsoft Edge](https://en.wikipedia.org/wiki/Microsoft_Edge)
* [Safari](https://www.apple.com/ca/safari/)
Works on [all VR headsets supported by A-Frame](https://aframe.io/docs/1.7.0/introduction/vr-headsets-and-webxr-browsers.html).
* [Meta Quest](https://en.wikipedia.org/wiki/Meta_Quest) (all versions)
* [Valve Index](https://en.wikipedia.org/wiki/Valve_Index)
* [HTC Vive](https://en.wikipedia.org/wiki/HTC_Vive)
* [Vive Focus](https://en.wikipedia.org/wiki/HTC_Vive)
* [Apple Vision Pro](https://en.wikipedia.org/wiki/Apple_Vision_Pro)
* [Oculus Go](https://en.wikipedia.org/wiki/Oculus_Go)
* [Oculus Rift](https://en.wikipedia.org/wiki/Oculus_Rift)
## đ 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](https://progamergov.github.io/html-360-viewer) 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](CITATION.cff) file or cite it as follows:
### BibTeX
```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
```