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

Clean up HTML element IDs: rename player-container to vr-container, vrVideo to vr180, and enterVrBtn to playBtn

Browse Source
This commit is contained in:
Michael Verdi
2025-07-29 17:15:39 -05:00
parent f378a5fff1
commit b0430a75ee
3 changed files with 23 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@@ -25,12 +25,12 @@
<main> <main>
<h1>VR180 Web Player</h1> <h1>VR180 Web Player</h1>
<p>This is a web-based player for 180° stereoscopic video.</p> <p>This is a web-based player for 180° stereoscopic video.</p>
<div id="player-container"> <div id="vr-container">
<video id="vrVideo" title="VR180 Video" crossOrigin="anonymous" playsinline> <video id="vr180" poster="poster.jpg" title="Demo Video" crossOrigin="anonymous" playsinline>
<source src="sbs-video.mp4" type="video/mp4"> <source src="sbs-video.mp4" type="video/mp4">
</video> </video>
</div> </div>
<button id="enterVrBtn">Enter VR</button> <button id="playBtn">Play</button>
</main> </main>
<script type="module" src="vr180-player.js"></script> <script type="module" src="vr180-player.js"></script>
</body> </body>

BIN
poster.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 145 KiB

40
vr180-player.js
View File

@@ -5,7 +5,7 @@ let vr180Mesh;
let xrSession = null; let xrSession = null;
let controller1, raycaster, uiElements = []; let controller1, raycaster, uiElements = [];
const tempMatrix = new THREE.Matrix4(); const tempMatrix = new THREE.Matrix4();
let videoElement, enterVrBtn; let videoElement, playBtn;
let frameCounter = 0; let frameCounter = 0;
let isXrLoopActive = false; let isXrLoopActive = false;
@@ -80,19 +80,19 @@ const SOUND_MUTED_SVG_PATH = "M6.9082 2.8985C7.71639 2.45747 8.74994 3.03437 8.7
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
videoElement = document.getElementById('vrVideo'); videoElement = document.getElementById('vr180');
enterVrBtn = document.getElementById('enterVrBtn'); playBtn = document.getElementById('playBtn');
if (videoElement) { if (videoElement) {
videoElement.style.display = 'none'; videoElement.style.display = 'none';
} }
if (!videoElement || !enterVrBtn) { if (!videoElement || !playBtn) {
console.error("CRITICAL_ERROR_DOM: Essential HTML elements (video or VR button) not found."); console.error("CRITICAL_ERROR_DOM: Essential HTML elements (video or VR button) not found.");
return; return;
} }
enterVrBtn.disabled = true; playBtn.disabled = true;
if (videoElement) { if (videoElement) {
videoElement.load(); videoElement.load();
} }
@@ -100,20 +100,20 @@ document.addEventListener('DOMContentLoaded', () => {
if (navigator.xr) { if (navigator.xr) {
navigator.xr.isSessionSupported('immersive-vr').then((supported) => { navigator.xr.isSessionSupported('immersive-vr').then((supported) => {
if (supported) { if (supported) {
enterVrBtn.dataset.xrSupported = "true"; playBtn.dataset.xrSupported = "true";
init(); init();
} else { } else {
enterVrBtn.dataset.xrSupported = "false"; playBtn.dataset.xrSupported = "false";
enterVrBtn.disabled = true; playBtn.disabled = true;
} }
}).catch(err => { }).catch(err => {
console.error("XR Support Check Error:", err); console.error("XR Support Check Error:", err);
enterVrBtn.disabled = true; playBtn.disabled = true;
}); });
} else { } else {
// If navigator.xr itself is not available, VR is not supported // If navigator.xr itself is not available, VR is not supported
if (enterVrBtn) { if (playBtn) {
enterVrBtn.disabled = true; playBtn.disabled = true;
} }
} }
}); });
@@ -214,7 +214,7 @@ function init() {
renderer.setSize(window.innerWidth, window.innerHeight); renderer.setSize(window.innerWidth, window.innerHeight);
renderer.xr.enabled = true; renderer.xr.enabled = true;
renderer.outputColorSpace = THREE.SRGBColorSpace; renderer.outputColorSpace = THREE.SRGBColorSpace;
document.getElementById('player-container').appendChild(renderer.domElement); document.getElementById('vr-container').appendChild(renderer.domElement);
if (renderer.domElement) { if (renderer.domElement) {
renderer.domElement.style.display = 'none'; renderer.domElement.style.display = 'none';
@@ -493,16 +493,16 @@ function init() {
} }
try { // Phase 3: Event Listeners try { // Phase 3: Event Listeners
if (enterVrBtn) { if (playBtn) {
enterVrBtn.addEventListener('click', handleEnterVRButtonClick); playBtn.addEventListener('click', handleEnterVRButtonClick);
} }
window.addEventListener('resize', onWindowResize); window.addEventListener('resize', onWindowResize);
if (video) { if (video) {
video.onloadedmetadata = () => { video.onloadedmetadata = () => {
if (isFinite(video.duration) && enterVrBtn) { if (isFinite(video.duration) && playBtn) {
if (enterVrBtn.dataset.xrSupported === "true") { if (playBtn.dataset.xrSupported === "true") {
enterVrBtn.disabled = false; playBtn.disabled = false;
} }
} }
updateSeekBarAppearance(); updateSeekBarAppearance();
@@ -510,8 +510,8 @@ function init() {
updateVRVolumeButtonIcon(); updateVRVolumeButtonIcon();
}; };
video.oncanplaythrough = () => { video.oncanplaythrough = () => {
if (enterVrBtn && enterVrBtn.dataset.xrSupported === "true" && video.readyState >= video.HAVE_FUTURE_DATA) { if (playBtn && playBtn.dataset.xrSupported === "true" && video.readyState >= video.HAVE_FUTURE_DATA) {
enterVrBtn.disabled = false; playBtn.disabled = false;
} }
}; };
video.ontimeupdate = () => { video.ontimeupdate = () => {
@@ -529,7 +529,7 @@ function init() {
const videoError = video.error; const videoError = video.error;
const errorDetail = videoError ? `Code: ${videoError.code}, Message: ${videoError.message}` : 'Unknown error'; const errorDetail = videoError ? `Code: ${videoError.code}, Message: ${videoError.message}` : 'Unknown error';
console.error("VIDEO_ERROR_EVENT:", e, "Details:", errorDetail); console.error("VIDEO_ERROR_EVENT:", e, "Details:", errorDetail);
if (enterVrBtn) enterVrBtn.disabled = true; if (playBtn) playBtn.disabled = true;
}; };
video.addEventListener('ended', onVideoEnded); video.addEventListener('ended', onVideoEnded);
video.addEventListener('volumechange', updateVRVolumeButtonIcon); video.addEventListener('volumechange', updateVRVolumeButtonIcon);