Spaces:

MarkTheArtist
/

mpeg-player

Running

App Files Files Community

MarkTheArtist commited on Sep 7, 2025

Commit

5dbe9dd

verified ·

1 Parent(s): 195ccc7

Create a site that will allow you to select multiple files and then play each mpeg file over and over without stopping, when you click on screen it will go to the next file. Totally client processing. - Initial Deployment

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +156 -18
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Mpeg Player
-emoji: 💻
 colorFrom: blue
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: mpeg-player
+emoji: 🐳
 colorFrom: blue
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,157 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<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;
+        }
+        .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);
+                }
+            });
+            clickArea.addEventListener('click', () => {
+                if (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}`;
+                    });
+                    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>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ Create a site that will allow you to select multiple files and then play each mpeg file over and over without stopping, when you click on screen it will go to the next file. Totally client processing.