Spaces:
Running
Running
I'd like it to run full screen if possible. Once it starts I walk the dialog box that shows you too.Select files.I'd like that to go away until the screen is pressed and held for more than one second - Follow Up Deployment
628c548 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MPEG Looper</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| body { | |
| background-color: #1a1a2e; | |
| color: #e6e6e6; | |
| height: 100vh; | |
| overflow: hidden; | |
| } | |
| .video-container { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| video { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| object-fit: contain; | |
| } | |
| .controls { | |
| position: absolute; | |
| bottom: 20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: rgba(0,0,0,0.7); | |
| padding: 10px 20px; | |
| border-radius: 20px; | |
| display: flex; | |
| gap: 15px; | |
| align-items: center; | |
| z-index: 10; | |
| transition: opacity 0.3s ease; | |
| } | |
| .controls.hidden { | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .file-input { | |
| display: none; | |
| } | |
| .btn { | |
| background: #4a4a8a; | |
| color: white; | |
| border: none; | |
| padding: 8px 16px; | |
| border-radius: 20px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| transition: all 0.3s ease; | |
| } | |
| .btn:hover { | |
| background: #6a6aaa; | |
| } | |
| .status { | |
| font-size: 14px; | |
| color: #aaa; | |
| } | |
| .fullscreen { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 5; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans"> | |
| <div class="video-container"> | |
| <video id="videoPlayer" loop></video> | |
| <div class="fullscreen" id="clickArea"></div> | |
| <div class="controls"> | |
| <button id="selectFilesBtn" class="btn"> | |
| <i data-feather="folder"></i> | |
| Select Files | |
| </button> | |
| <span id="status" class="status">No files selected</span> | |
| <input type="file" id="fileInput" class="file-input" accept="video/mpeg,.mpeg,.mpg" multiple> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| feather.replace(); | |
| const fileInput = document.getElementById('fileInput'); | |
| const selectFilesBtn = document.getElementById('selectFilesBtn'); | |
| const videoPlayer = document.getElementById('videoPlayer'); | |
| const status = document.getElementById('status'); | |
| const clickArea = document.getElementById('clickArea'); | |
| let files = []; | |
| let currentFileIndex = 0; | |
| selectFilesBtn.addEventListener('click', () => { | |
| fileInput.click(); | |
| }); | |
| fileInput.addEventListener('change', (e) => { | |
| files = Array.from(e.target.files); | |
| if (files.length > 0) { | |
| status.textContent = `${files.length} files selected`; | |
| playFile(0); | |
| } | |
| }); | |
| let longPressTimer; | |
| const controls = document.querySelector('.controls'); | |
| clickArea.addEventListener('mousedown', () => { | |
| longPressTimer = setTimeout(() => { | |
| controls.classList.toggle('hidden'); | |
| }, 1000); | |
| }); | |
| clickArea.addEventListener('mouseup', () => { | |
| clearTimeout(longPressTimer); | |
| }); | |
| clickArea.addEventListener('mouseleave', () => { | |
| clearTimeout(longPressTimer); | |
| }); | |
| clickArea.addEventListener('click', (e) => { | |
| if (e.target === clickArea && files.length > 0) { | |
| currentFileIndex = (currentFileIndex + 1) % files.length; | |
| playFile(currentFileIndex); | |
| } | |
| }); | |
| function playFile(index) { | |
| if (index >= 0 && index < files.length) { | |
| const file = files[index]; | |
| const fileURL = URL.createObjectURL(file); | |
| videoPlayer.src = fileURL; | |
| videoPlayer.load(); | |
| videoPlayer.addEventListener('canplay', () => { | |
| videoPlayer.play().catch(e => { | |
| console.error('Autoplay prevented:', e); | |
| }); | |
| status.textContent = `Playing ${index + 1}/${files.length}: ${file.name}`; | |
| controls.classList.add('hidden'); | |
| // Try to enter fullscreen automatically | |
| if (videoPlayer.requestFullscreen) { | |
| videoPlayer.requestFullscreen().catch(e => { | |
| console.log('Fullscreen error:', e); | |
| }); | |
| } | |
| }); | |
| videoPlayer.addEventListener('ended', () => { | |
| videoPlayer.currentTime = 0; | |
| videoPlayer.play(); | |
| }); | |
| } | |
| } | |
| // Handle fullscreen | |
| clickArea.addEventListener('dblclick', () => { | |
| if (videoPlayer.requestFullscreen) { | |
| videoPlayer.requestFullscreen(); | |
| } else if (videoPlayer.webkitRequestFullscreen) { | |
| videoPlayer.webkitRequestFullscreen(); | |
| } else if (videoPlayer.msRequestFullscreen) { | |
| videoPlayer.msRequestFullscreen(); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |