Spaces:

Subham9126
/

dfd

Running

App Files Files Community

Subham9126 commited on Apr 20, 2025

Commit

77bca8d

verified ·

1 Parent(s): f19ddb9

Update index.html

Browse files

Files changed (1) hide show

index.html +149 -292

index.html CHANGED Viewed

@@ -3,326 +3,183 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Video Hub - Private Collection</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
-        .video-container {
-            aspect-ratio: 16/9;
         }
-        .video-thumbnail {
-            transition: all 0.3s ease;
         }
-        .video-thumbnail:hover {
-            transform: scale(1.03);
-            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
         }
-        .scrollbar-hide::-webkit-scrollbar {
-            display: none;
         }
-        .scrollbar-hide {
-            -ms-overflow-style: none;
-            scrollbar-width: none;
         }
     </style>
 </head>
-<body class="bg-gray-900 text-gray-100 min-h-screen">
-    <div class="container mx-auto px-4 py-8">
-        <!-- Header -->
-        <header class="flex flex-col md:flex-row justify-between items-center mb-8 gap-4">
-            <div class="flex items-center gap-3">
-                <i class="fas fa-video text-purple-500 text-3xl"></i>
-                <h1 class="text-2xl md:text-3xl font-bold bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent">
-                    Solo Leveling Video Hub
-                </h1>
-            </div>
-            <div class="relative w-full md:w-64">
-                <input
-                    type="text"
-                    id="searchInput"
-                    placeholder="Search videos..."
-                    class="w-full bg-gray-800 rounded-lg px-4 py-2 pl-10 focus:outline-none focus:ring-2 focus:ring-purple-500"
-                >
-                <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
-            </div>
-        </header>
-        <!-- Main Content -->
-        <main>
-            <!-- Video Player Section -->
-            <section id="playerSection" class="hidden mb-8 bg-gray-800 rounded-xl overflow-hidden shadow-xl">
-                <div class="video-container w-full bg-black">
-                    <video
-                        id="mainVideoPlayer"
-                        controls
-                        class="w-full h-full"
-                        poster="https://images.unsplash.com/photo-1579373903781-fd5c0c30c4cd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80"
-                    >
-                        Your browser does not support the video tag.
-                    </video>
-                </div>
-                <div class="p-4">
-                    <h2 id="videoTitle" class="text-xl font-bold mb-2">Select a video to play</h2>
-                    <div class="flex justify-between items-center">
-                        <div id="videoInfo" class="text-gray-400 text-sm">
-                            <span id="currentTime">00:00</span> / <span id="duration">00:00</span>
-                        </div>
-                        <div class="flex gap-2">
-                            <button id="fullscreenBtn" class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-lg">
-                                <i class="fas fa-expand"></i>
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </section>
-            <!-- Video List Section -->
-            <section>
-                <h2 class="text-xl font-semibold mb-4 flex items-center gap-2">
-                    <i class="fas fa-list"></i>
-                    Video Collection
-                </h2>
-                <div id="videoGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-                    <!-- Videos will be loaded here -->
-                </div>
-                <div id="loadingIndicator" class="text-center py-8">
-                    <i class="fas fa-spinner fa-spin text-2xl text-purple-500"></i>
-                    <p class="mt-2">Loading videos...</p>
-                </div>
-                <div id="noResults" class="hidden text-center py-8">
-                    <i class="fas fa-video-slash text-2xl text-gray-500"></i>
-                    <p class="mt-2 text-gray-400">No videos found matching your search</p>
-                </div>
-            </section>
-        </main>
-        <!-- Footer -->
-        <footer class="mt-12 pt-6 border-t border-gray-800 text-center text-gray-500 text-sm">
-            <p>Private Video Hub - For authorized use only</p>
-            <p class="mt-1">© 2023 Solo Leveling Collection. All rights reserved.</p>
-        </footer>
     </div>
     <script>
-        // Video database (would normally be fetched from database.json)
-        const videoDatabase = {
-            "videos": [
-                {
-                    "title": "E02",
-                    "url": "https://huggingface.co/Subham9126/DB/blob/main/E05/output.m3u8"
-                },
-                {
-                    "title": "E03",
-                    "url": "https://huggingface.co/Subham9126/DB/resolve/main/Solo.Leveling.Arise.from.the.Shadow.S02E03.1080p.WEB-DL.Hindi.2.0-English.2.0.ESub.x264-HDHub4u.Tv.mkv?download=true"
-                },
-                {
-                    "title": "E04",
-                    "url": "https://huggingface.co/Subham9126/DB/resolve/main/Solo.Leveling.Arise.from.the.Shadow.S02E04.1080p.WEB-DL.Hindi.2.0-English.2.0.ESub.x264-HDHub4u.Tv.mkv"
-                },
-                {
-                    "title": "E05",
-                    "url": "https://huggingface.co/Subham9126/DB/resolve/main/Solo.Leveling.Arise.from.the.Shadow.S02E05.1080p.WEB-DL.Hindi.2.0-English.2.0.ESub.x264-HDHub4u.Tv.mkv"
-                },
-                {
-                    "title": "Recurrent Neural Networks",
-                    "url": "https://pub-ae4961d7376541d7ac8c9c9f32eed981.r2.dev/Solo.Leveling.Arise.from.the.Shadow.S02E04.1080p.WEB-DL.Hindi.2.0-English.2.0.ESub.x264-HDHub4u.Tv.mkv"
-                },
-                {
-                    "title": "Transformers Architecture",
-                    "url": "https://pub-ae4961d7376541d7ac8c9c9f32eed981.r2.dev/Solo.Leveling.Arise.from.the.Shadow.S02E05.1080p.WEB-DL.Hindi.2.0-English.2.0.ESub.x264-HDHub4u.Tv.mkv"
-                },
-                {
-                    "title": "Natural Language Processing",
-                    "url": "https://pub-ae4961d7376541d7ac8c9c9f32eed981.r2.dev/Solo.Leveling.Arise.from.the.Shadow.S02E06.1080p.WEB-DL.Hindi.2.0-English.2.0.ESub.x264-HDHub4u.Tv.mkv"
-                },
-                {
-                    "title": "Computer Vision Basics",
-                    "url": "https://huggingface.co/username/model-repo/resolve/main/cv-basics.mp4"
-                },
-                {
-                    "title": "Object Detection Methods",
-                    "url": "https://huggingface.co/username/model-repo/resolve/main/object-detection.mp4"
-                },
-                {
-                    "title": "Image Segmentation Techniques",
-                    "url": "https://huggingface.co/username/model-repo/resolve/main/segmentation.mp4"
-                },
-                {
-                    "title": "Reinforcement Learning",
-                    "url": "https://huggingface.co/username/model-repo/resolve/main/rl.mp4"
-                },
-                {
-                    "title": "Transfer Learning",
-                    "url": "https://huggingface.co/username/model-repo/resolve/main/transfer-learning.mp4"
-                },
-                {
-                    "title": "GANs: Generative Adversarial Networks",
-                    "url": "https://huggingface.co/username/model-repo/resolve/main/gans.mp4"
-                },
-                {
-                    "title": "Diffusion Models Explained",
-                    "url": "https://huggingface.co/username/model-repo/resolve/main/diffusion.mp4"
-                },
-                {
-                    "title": "Training Large Language Models",
-                    "url": "https://huggingface.co/username/model-repo/resolve/main/llm-training.mp4"
-                },
-                {
-                    "title": "Python for Data Science",
-                    "url": "https://huggingface.co/username/model-repo/resolve/main/python-ds.mp4"
-                },
-                {
-                    "title": "TensorFlow Tutorial",
-                    "url": "https://huggingface.co/username/model-repo/resolve/main/tensorflow.mp4"
-                },
-                {
-                    "title": "PyTorch Basics",
-                    "url": "https://huggingface.co/username/model-repo/resolve/main/pytorch.mp4"
-                },
-                {
-                    "title": "Deploying ML Models",
-                    "url": "https://huggingface.co/username/model-repo/resolve/main/deployment.mp4"
-                },
-                {
-                    "title": "MLOps Introduction",
-                    "url": "https://huggingface.co/username/model-repo/resolve/main/mlops.mp4"
-                },
-                {
-                    "title": "Big Buck Bunny (Sample)",
-                    "url": "https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
-                },
-                {
-                    "title": "Sintel (Sample)",
-                    "url": "https://storage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4"
-                }
-            ]
-        };
-        // DOM Elements
-        const videoGrid = document.getElementById('videoGrid');
-        const loadingIndicator = document.getElementById('loadingIndicator');
-        const noResults = document.getElementById('noResults');
-        const searchInput = document.getElementById('searchInput');
-        const playerSection = document.getElementById('playerSection');
-        const mainVideoPlayer = document.getElementById('mainVideoPlayer');
-        const videoTitle = document.getElementById('videoTitle');
-        const currentTime = document.getElementById('currentTime');
-        const duration = document.getElementById('duration');
-        const fullscreenBtn = document.getElementById('fullscreenBtn');
-        // Initialize the app
-        document.addEventListener('DOMContentLoaded', () => {
-            // Load videos
-            setTimeout(() => {
-                loadVideos(videoDatabase.videos);
-            }, 800); // Simulate loading delay
-            // Setup event listeners
-            searchInput.addEventListener('input', handleSearch);
-            fullscreenBtn.addEventListener('click', toggleFullscreen);
-            // Video player time updates
-            mainVideoPlayer.addEventListener('timeupdate', updateVideoTime);
-            mainVideoPlayer.addEventListener('loadedmetadata', () => {
-                duration.textContent = formatTime(mainVideoPlayer.duration);
-            });
-        });
-        // Load videos into the grid
-        function loadVideos(videos) {
-            loadingIndicator.classList.add('hidden');
-            if (videos.length === 0) {
-                noResults.classList.remove('hidden');
                 return;
             }
-            videoGrid.innerHTML = '';
-            videos.forEach(video => {
-                const videoCard = document.createElement('div');
-                videoCard.className = 'video-thumbnail bg-gray-800 rounded-lg overflow-hidden cursor-pointer hover:shadow-lg transition-all';
-                videoCard.innerHTML = `
-                    <div onclick="playVideo('${video.url}', '${video.title.replace(/'/g, "\\'")}')" class="h-full">
-                        <div class="relative pb-[56.25%] bg-gray-700">
-                            <div class="absolute inset-0 flex items-center justify-center">
-                                <i class="fas fa-play text-white text-4xl opacity-80"></i>
-                            </div>
-                            <img src="https://images.unsplash.com/photo-1579373903781-fd5c0c30c4cd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80"
-                                 alt="${video.title}"
-                                 class="absolute inset-0 w-full h-full object-cover opacity-70">
-                        </div>
-                        <div class="p-3">
-                            <h3 class="font-medium truncate">${video.title}</h3>
-                            <p class="text-xs text-gray-400 mt-1 truncate">${video.url}</p>
-                        </div>
-                    </div>
-                `;
-                videoGrid.appendChild(videoCard);
-            });
-        }
-        // Play selected video
-        function playVideo(url, title) {
-            playerSection.classList.remove('hidden');
-            mainVideoPlayer.src = url;
-            videoTitle.textContent = title;
-            // Scroll to player
-            playerSection.scrollIntoView({ behavior: 'smooth' });
-            // Attempt to play (may be blocked by autoplay policies)
-            mainVideoPlayer.play().catch(e => {
-                console.log('Autoplay was prevented:', e);
-            });
-        }
-        // Handle search functionality
-        function handleSearch() {
-            const searchTerm = searchInput.value.toLowerCase();
-            if (searchTerm === '') {
-                loadVideos(videoDatabase.videos);
-                return;
             }
-            const filteredVideos = videoDatabase.videos.filter(video =>
-                video.title.toLowerCase().includes(searchTerm) ||
-                video.url.toLowerCase().includes(searchTerm)
-            );
-            loadVideos(filteredVideos);
-        }
-        // Update video time display
-        function updateVideoTime() {
-            currentTime.textContent = formatTime(mainVideoPlayer.currentTime);
-        }
-        // Format time as MM:SS
-        function formatTime(seconds) {
-            const mins = Math.floor(seconds / 60);
-            const secs = Math.floor(seconds % 60);
-            return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
-        }
-        // Toggle fullscreen
-        function toggleFullscreen() {
-            if (!document.fullscreenElement) {
-                mainVideoPlayer.requestFullscreen().catch(err => {
-                    console.error(`Error attempting to enable fullscreen: ${err.message}`);
                 });
-            } else {
-                document.exitFullscreen();
             }
         }
-        // Make functions available globally
-        window.playVideo = playVideo;
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Basic M3U8 Player</title>
     <style>
+        body {
+            font-family: sans-serif;
+            padding: 20px;
+            background-color: #f4f4f4;
         }
+        #player-container {
+            margin-top: 20px;
+            background-color: #fff;
+            padding: 15px;
+            border-radius: 5px;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
         }
+        #videoPlayer {
+            width: 100%;
+            max-width: 800px; /* Adjust as needed */
+            background-color: #000; /* Black background for letterboxing */
+            display: block; /* Prevents extra space below video */
+            margin-top: 10px;
         }
+        #urlInput {
+            width: calc(100% - 100px); /* Adjust width */
+            padding: 10px;
+            margin-right: 5px;
+            border: 1px solid #ccc;
+            border-radius: 3px;
         }
+        #loadButton {
+            padding: 10px 15px;
+            cursor: pointer;
+            background-color: #007bff;
+            color: white;
+            border: none;
+            border-radius: 3px;
+        }
+        #loadButton:hover {
+            background-color: #0056b3;
+        }
+        #status {
+            margin-top: 10px;
+            font-style: italic;
+            color: #555;
+        }
+        .error {
+            color: red;
+            font-weight: bold;
         }
     </style>
+    <!-- 1. Include hls.js library -->
+    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
 </head>
+<body>
+    <h1>Basic M3U8 Web Player</h1>
+    <div id="player-container">
+        <label for="urlInput">M3U8 URL:</label>
+        <input type="text" id="urlInput" placeholder="https://example.com/stream.m3u8">
+        <button id="loadButton">Load Stream</button>
+        <div id="status">Enter an M3U8 URL and click Load.</div>
+        <!-- 2. The Video Element -->
+        <video id="videoPlayer" controls></video>
     </div>
     <script>
+        const videoElement = document.getElementById('videoPlayer');
+        const urlInput = document.getElementById('urlInput');
+        const loadButton = document.getElementById('loadButton');
+        const statusDiv = document.getElementById('status');
+        let hls = null; // Variable to hold the Hls instance
+        loadButton.addEventListener('click', loadStream);
+        function loadStream() {
+            const m3u8Url = urlInput.value.trim();
+            statusDiv.textContent = ''; // Clear previous status
+            statusDiv.classList.remove('error');
+            if (!m3u8Url) {
+                statusDiv.textContent = 'Please enter an M3U8 URL.';
+                statusDiv.classList.add('error');
                 return;
             }
+            // Destroy previous instance if it exists
+            if (hls) {
+                hls.destroy();
+                hls = null;
             }
+            // Check if HLS is supported by the browser (using hls.js)
+            if (Hls.isSupported()) {
+                console.log("HLS.js is supported. Initializing...");
+                statusDiv.textContent = 'Loading stream with HLS.js...';
+                hls = new Hls(); // Create a new Hls instance
+                // Bind error handling
+                hls.on(Hls.Events.ERROR, function (event, data) {
+                    if (data.fatal) {
+                        switch(data.type) {
+                            case Hls.ErrorTypes.NETWORK_ERROR:
+                                console.error('Fatal network error encountered:', data);
+                                statusDiv.textContent = `Error: Network error - ${data.details}. Check URL and CORS policy.`;
+                                statusDiv.classList.add('error');
+                                hls.destroy(); // Clean up on fatal error
+                                hls = null;
+                                break;
+                            case Hls.ErrorTypes.MEDIA_ERROR:
+                                console.error('Fatal media error encountered:', data);
+                                statusDiv.textContent = `Error: Media error - ${data.details}. Trying to recover...`;
+                                statusDiv.classList.add('error');
+                                hls.recoverMediaError();
+                                break;
+                            default:
+                                // Cannot recover
+                                console.error('Unrecoverable fatal error:', data);
+                                statusDiv.textContent = `Error: Unrecoverable error - ${data.details}.`;
+                                statusDiv.classList.add('error');
+                                hls.destroy();
+                                hls = null;
+                                break;
+                        }
+                    } else {
+                         console.warn('Non-fatal HLS error:', data);
+                         statusDiv.textContent = `Warning: ${data.details}`;
+                         statusDiv.classList.remove('error'); // Maybe not a fatal error shown to user
+                    }
                 });
+                hls.loadSource(m3u8Url);
+                hls.attachMedia(videoElement);
+                hls.on(Hls.Events.MANIFEST_PARSED, function() {
+                    console.log('Manifest parsed. Ready to play.');
+                    statusDiv.textContent = 'Stream loaded. Press play!';
+                    // You could uncomment the next line to autoplay, but user interaction is often required by browsers
+                    // videoElement.play();
+                });
+            }
+            // Check for native browser HLS support (e.g., Safari on iOS/macOS)
+            else if (videoElement.canPlayType('application/vnd.apple.mpegurl')) {
+                console.log("Native HLS support detected (e.g., Safari).");
+                statusDiv.textContent = 'Loading stream using native browser support...';
+                videoElement.src = m3u8Url;
+                videoElement.addEventListener('loadedmetadata', function() {
+                     console.log('Metadata loaded. Ready to play.');
+                     statusDiv.textContent = 'Stream loaded. Press play!';
+                    // videoElement.play(); // Autoplay if desired and allowed
+                });
+                 videoElement.addEventListener('error', function(e) {
+                    console.error('Native HLS playback error:', e);
+                    statusDiv.textContent = 'Error loading stream with native player. Check URL/CORS.';
+                    statusDiv.classList.add('error');
+                });
+            }
+            // HLS is not supported on this browser
+            else {
+                statusDiv.textContent = 'Error: HLS is not supported in this browser.';
+                statusDiv.classList.add('error');
+                console.error("HLS is not supported by hls.js or natively.");
             }
         }
+        // Optional: Add listener to Enter key in input field
+        urlInput.addEventListener('keypress', function(event) {
+            if (event.key === 'Enter') {
+                event.preventDefault(); // Prevent potential form submission
+                loadButton.click(); // Trigger the button click
+            }
+        });
     </script>
 </body>
 </html>