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

Implement dynamic UI creation for VR180 player

Browse Source 
- Remove static HTML elements (play button and control panel) from index.html
- Add createPlayButton() and create2DControlPanel() functions to dynamically generate UI
- Update DOMContentLoaded handler to create and insert UI elements on page load
- Maintain all existing functionality while making player more modular and self-contained
- UI elements are now created entirely by JavaScript, making the player easier to integrate
- Tested and verified: play button appears correctly, 2D mode works, controls function properly
This commit is contained in:
Michael Verdi
2025-07-31 22:41:14 -05:00
parent 07611f8a1d
commit 896777ac30
2 changed files with 108 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
index.html
View File

@@ -30,30 +30,7 @@
<video id="vr180" poster="poster.jpg" title="Demo Video" crossOrigin="anonymous" playsinline>
<source src="sbs-video.mp4" type="video/mp4">
</video>
<button id="playBtn" aria-label="Play video">
<img src="vr180player/images/play.png" alt="Play">
</button>
<div id="panel">
<div id="status">
<p id="video-title">Title</p>
<div id="progress">
<p id="current-time">00:00:00</p>
<div id="bar">
<div id="played"></div>
</div>
<p id="total-time">00:00:00</p>
</div>
</div>
<div id="controls">
<button id="fullscreen"></button>
<div id="nav">
<button id="back"></button>
<button id="play2"></button>
<button id="forward"></button>
</div>
<button id="mute"></button>
</div>
</div>
<!-- UI elements will be dynamically inserted here by JavaScript -->
</div>
</main>
<script type="module" src="vr180player/vr180-player.js"></script>