aiden/VR-Web-Player
1
0
Fork 0
forked from EXT/VR180-Web-Player
Code Actions Activity

Added a sample video and updated the README.

Browse Source
This commit is contained in:
Michael Verdi
2025-07-29 13:47:24 -05:00
parent df75e2a32d
commit f378a5fff1
3 changed files with 30 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
README.md
View File

@@ -1,21 +1,19 @@
# VR180 Web Player # VR180 Web Player
A web-based video player for 180 degree, 3D video. A web-based video player for 180 degree, 3D video.
Got an immersive video you want people to see with the Apple Vision Pro or Meta Quest headsets? You could build an app and deal with corporate policies and rejections. You can put it on YouTube but it will be limited to 4k and Meta headsets. Or, now, you can use this web player and put it on your website. Got an immersive video you want people to see with the Apple Vision Pro or Meta Quest headsets? You could build an app and deal with app stores. You could jump through some hoops to put it on YouTube but it will be limited to Meta headsets. Or you can use this web player and put it on your website.
## How to use it ## How to use it
Add the player script `<script type="module" src="vr180-player.js"></script>` before the closing body tag and use this HTML snippet: Add the player script `<script type="module" src="vr180-player.js"></script>` before the closing body tag and use this HTML snippet:
``` ```
<div id="player-container"> <div id="player-container">
<div id="video-info" style="display: none;"><!-- You can put whatever you like in this div. It's only shown when VR is available. --> <video id="vrVideo" title="VR180 Video" crossOrigin="anonymous" playsinline>
<video id="vrVideo" controls crossOrigin="anonymous" playsinline webkit-playsinline> <source src="sbs-video.mp4" type="video/mp4">
<source src="REPLACE_THIS.mp4" type="video/mp4">`
</video> </video>
</div>
<button id="enterVrBtn">Enter VR</button> <button id="enterVrBtn">Enter VR</button>
</div>
</div>
``` ```
When VR is available, the page will display a button (and anything else you include inside `<div id="video-info">`) to begin the immersive experience. This creates a button on your page. When VR is available, the button will be active and clicking it will begin the immersive experience.
<img src="https://github.com/user-attachments/assets/05db6208-6d42-48fa-a0da-55de41f35e6d" width=50%> <img src="https://github.com/user-attachments/assets/05db6208-6d42-48fa-a0da-55de41f35e6d" width=50%>
@@ -38,8 +36,8 @@ Tapping anywhere will bring up the controls. Without interaction they will go aw
- Exit VR - Exit VR
## Future ## Future
I'm not a developer. I used Google's Gemini to help create this and give me the ability to post immersive videos on my website. I'm unlikely to be able to help you if you run into problems, want to customize this, or add new features. I'm releasing this with the [unlicense](https://unlicense.org/) so you're free to do anything at all with it. That said, if you have ideas or want to contribute code, I'd love to [hear](mailto:hello@michaelverdi.com) from you. I'm not a developer. I used AI to help create this and give me the ability to post immersive videos on my website. I'm unlikely to be able to help you if you run into problems, want to customize this, or add new features. I'm releasing this with the [unlicense](https://unlicense.org/) so you're free to do anything at all with it. That said, if you have ideas or want to contribute code, I'd love to [hear](mailto:hello@michaelverdi.com) from you.
## Demo ## Demo
**Test it out in a headset!** **Test it out in a headset!**
Open [https://exp.michaelverdi.com/vr180web](https://exp.michaelverdi.com/vr180web) in browser on your headset and then click the Enter VR button. Open [https://verdi.github.io/VR180-Web-Player/](https://verdi.github.io/VR180-Web-Player/) in a browser on your headset and then click the Enter VR button.

24
index.html
View File

@@ -4,14 +4,34 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>VR180 Web Player</title> <title>VR180 Web Player</title>
<style>
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1rem;
font-weight: normal;
}
main {
max-width: 750px;
margin: auto;
}
video {
width: 100%;
height: auto;
aspect-ratio: 16/9;
}
</style>
</head> </head>
<body> <body>
<main>
<h1>VR180 Web Player</h1>
<p>This is a web-based player for 180° stereoscopic video.</p>
<div id="player-container"> <div id="player-container">
<video id="vrVideo" title="VR180 Video" controls crossOrigin="anonymous" playsinline webkit-playsinline> <video id="vrVideo" title="VR180 Video" crossOrigin="anonymous" playsinline>
<source src="REPLACE_THIS.mp4" type="video/mp4"> <source src="sbs-video.mp4" type="video/mp4">
</video> </video>
</div> </div>
<button id="enterVrBtn">Enter VR</button> <button id="enterVrBtn">Enter VR</button>
</main>
<script type="module" src="vr180-player.js"></script> <script type="module" src="vr180-player.js"></script>
</body> </body>
</html> </html>

BIN
sbs-video.mp4 Normal file
View File

Binary file not shown.