diff --git a/index.html b/index.html
index b0ee2b9..50061bf 100644
--- a/index.html
+++ b/index.html
@@ -19,6 +19,60 @@
height: auto;
aspect-ratio: 16/9;
}
+
+ #vr-container {
+ position: relative;
+ display: inline-block;
+ width: 100%;
+ }
+
+ #playBtn {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background: none;
+ border: none;
+ cursor: pointer;
+ padding: 0;
+ width: 80px;
+ height: 80px;
+ transition: opacity 0.3s ease, transform 0.2s ease;
+ z-index: 10;
+ }
+
+ #playBtn:hover {
+ transform: translate(-50%, -50%) scale(1.1);
+ }
+
+ #playBtn:active {
+ transform: translate(-50%, -50%) scale(0.95);
+ }
+
+ #playBtn.hidden {
+ opacity: 0;
+ pointer-events: none;
+ }
+
+ #playBtn svg {
+ width: 100%;
+ height: 100%;
+ }
+
+ /* Responsive sizing */
+ @media (max-width: 600px) {
+ #playBtn {
+ width: 60px;
+ height: 60px;
+ }
+ }
+
+ @media (min-width: 900px) {
+ #playBtn {
+ width: 100px;
+ height: 100px;
+ }
+ }
@@ -29,8 +83,20 @@
+
-
diff --git a/vr180-player.js b/vr180-player.js
index 903f170..fd3a6de 100644
--- a/vr180-player.js
+++ b/vr180-player.js
@@ -688,6 +688,18 @@ function onWindowResize() {
}
}
+function hidePlayButton() {
+ if (playBtn) {
+ playBtn.classList.add('hidden');
+ }
+}
+
+function enableNativeControls() {
+ if (video) {
+ video.controls = true;
+ }
+}
+
function togglePlayPause() {
if (!video || !video.currentSrc) return;
if (video.paused || video.ended) {
@@ -771,12 +783,16 @@ async function handleEnterVRButtonClick() {
return;
}
+ // Hide the play button after click
+ hidePlayButton();
+
// Check if VR is supported
if (playBtn.dataset.xrSupported === "true") {
// VR is supported - use VR functionality
await actualSessionToggle();
} else {
- // VR is not supported - use regular video playback
+ // VR is not supported - use regular video playback and enable native controls
+ enableNativeControls();
togglePlayPause();
}
}