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

Implement custom SVG play button with enhanced UX

Browse Source 
- Replace text button with beautiful SVG play button
- Position button over center of video with responsive sizing
- Add smooth hover and click animations
- Hide button after click and enable native browser controls for 2D
- Maintain VR functionality when supported
- Add proper accessibility with aria-label
- Responsive design works on mobile and desktop
This commit is contained in:
Michael Verdi
2025-07-30 10:26:18 -05:00
parent eaab4ee3ba
commit 45e1617ca3
2 changed files with 84 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
index.html
View File

@@ -19,6 +19,60 @@
height: auto; height: auto;
aspect-ratio: 16/9; 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;
}
}
</style> </style>
</head> </head>
<body> <body>
@@ -29,8 +83,20 @@
<video id="vr180" poster="poster.jpg" title="Demo 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>
<button id="playBtn" aria-label="Play video">
<svg width="178" height="178" viewBox="0 0 178 178" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.277832" y="0.5" width="176.891" height="176.891" rx="88.4453" fill="black" fill-opacity="0.7" style="mix-blend-mode:color-dodge"/>
<g clip-path="url(#clip0_61_569)">
<path d="M129.531 81.5831C133.792 84.8001 133.792 91.2001 129.531 94.4171L72.5213 137.46C67.224 141.459 59.6361 137.68 59.6361 131.043V44.9577C59.6361 38.3201 67.224 34.5413 72.5213 38.5407L129.531 81.5831Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_61_569">
<rect width="128.648" height="128.648" fill="white" transform="translate(29.4844 23.676)"/>
</clipPath>
</defs>
</svg>
</button>
</div> </div>
<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>

18
vr180-player.js
View File

@@ -688,6 +688,18 @@ function onWindowResize() {
} }
} }
function hidePlayButton() {
if (playBtn) {
playBtn.classList.add('hidden');
}
}
function enableNativeControls() {
if (video) {
video.controls = true;
}
}
function togglePlayPause() { function togglePlayPause() {
if (!video || !video.currentSrc) return; if (!video || !video.currentSrc) return;
if (video.paused || video.ended) { if (video.paused || video.ended) {
@@ -771,12 +783,16 @@ async function handleEnterVRButtonClick() {
return; return;
} }
// Hide the play button after click
hidePlayButton();
// Check if VR is supported // Check if VR is supported
if (playBtn.dataset.xrSupported === "true") { if (playBtn.dataset.xrSupported === "true") {
// VR is supported - use VR functionality // VR is supported - use VR functionality
await actualSessionToggle(); await actualSessionToggle();
} else { } else {
// VR is not supported - use regular video playback // VR is not supported - use regular video playback and enable native controls
enableNativeControls();
togglePlayPause(); togglePlayPause();
} }
} }