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>
<h1>VR180 Web Player</h1>
<p>This is a web-based player for 180° stereoscopic video.</p>
<div id="player-container">
<video id="vrVideo" title="VR180 Video" crossOrigin="anonymous" playsinline>
<div id="vr-container">
<video id="vr180" poster="poster.jpg" title="Demo Video" crossOrigin="anonymous" playsinline>
<source src="sbs-video.mp4" type="video/mp4">
</video>
</div>
<button id="enterVrBtn">Enter VR</button>
<button id="playBtn">Play</button>
</main>
<script type="module" src="vr180-player.js"></script>
</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 controller1, raycaster, uiElements = [];
const tempMatrix = new THREE.Matrix4();
let videoElement, enterVrBtn;
let videoElement, playBtn;
let frameCounter = 0;
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', () => {
videoElement = document.getElementById('vrVideo');
enterVrBtn = document.getElementById('enterVrBtn');
videoElement = document.getElementById('vr180');
playBtn = document.getElementById('playBtn');
if (videoElement) {
videoElement.style.display = 'none';
}
if (!videoElement || !enterVrBtn) {
if (!videoElement || !playBtn) {
console.error("CRITICAL_ERROR_DOM: Essential HTML elements (video or VR button) not found.");
return;
}
enterVrBtn.disabled = true;
playBtn.disabled = true;
if (videoElement) {
videoElement.load();
}
@@ -100,20 +100,20 @@ document.addEventListener('DOMContentLoaded', () => {
if (navigator.xr) {
navigator.xr.isSessionSupported('immersive-vr').then((supported) => {
if (supported) {
enterVrBtn.dataset.xrSupported = "true";
playBtn.dataset.xrSupported = "true";
init();
} else {
enterVrBtn.dataset.xrSupported = "false";
enterVrBtn.disabled = true;
playBtn.dataset.xrSupported = "false";
playBtn.disabled = true;
}
}).catch(err => {
console.error("XR Support Check Error:", err);
enterVrBtn.disabled = true;
playBtn.disabled = true;
});
} else {
// If navigator.xr itself is not available, VR is not supported
if (enterVrBtn) {
enterVrBtn.disabled = true;
if (playBtn) {
playBtn.disabled = true;
}
}
});
@@ -214,7 +214,7 @@ function init() {
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.xr.enabled = true;
renderer.outputColorSpace = THREE.SRGBColorSpace;
document.getElementById('player-container').appendChild(renderer.domElement);
document.getElementById('vr-container').appendChild(renderer.domElement);
if (renderer.domElement) {
renderer.domElement.style.display = 'none';
@@ -493,16 +493,16 @@ function init() {
}
try { // Phase 3: Event Listeners
if (enterVrBtn) {
enterVrBtn.addEventListener('click', handleEnterVRButtonClick);
if (playBtn) {
playBtn.addEventListener('click', handleEnterVRButtonClick);
}
window.addEventListener('resize', onWindowResize);
if (video) {
video.onloadedmetadata = () => {
if (isFinite(video.duration) && enterVrBtn) {
if (enterVrBtn.dataset.xrSupported === "true") {
enterVrBtn.disabled = false;
if (isFinite(video.duration) && playBtn) {
if (playBtn.dataset.xrSupported === "true") {
playBtn.disabled = false;
}
}
updateSeekBarAppearance();
@@ -510,8 +510,8 @@ function init() {
updateVRVolumeButtonIcon();
};
video.oncanplaythrough = () => {
if (enterVrBtn && enterVrBtn.dataset.xrSupported === "true" && video.readyState >= video.HAVE_FUTURE_DATA) {
enterVrBtn.disabled = false;
if (playBtn && playBtn.dataset.xrSupported === "true" && video.readyState >= video.HAVE_FUTURE_DATA) {
playBtn.disabled = false;
}
};
video.ontimeupdate = () => {
@@ -529,7 +529,7 @@ function init() {
const videoError = video.error;
const errorDetail = videoError ? `Code: ${videoError.code}, Message: ${videoError.message}` : 'Unknown error';
console.error("VIDEO_ERROR_EVENT:", e, "Details:", errorDetail);
if (enterVrBtn) enterVrBtn.disabled = true;
if (playBtn) playBtn.disabled = true;
};
video.addEventListener('ended', onVideoEnded);
video.addEventListener('volumechange', updateVRVolumeButtonIcon);