Spaces:
Running
Running
| <html lang="ko"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Video Gallery</title> | |
| <style> | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .container { | |
| max-width: 1800px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| .selected-content { | |
| display: flex; | |
| margin-bottom: 30px; | |
| gap: 20px; | |
| height: 400px; | |
| } | |
| .selected-thumbnail { | |
| flex: 1; | |
| background-color: #000; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .selected-thumbnail video { | |
| max-width: 100%; | |
| max-height: 100%; | |
| object-fit: contain; | |
| } | |
| .selected-video { | |
| flex: 1; | |
| background-color: #000; | |
| } | |
| .selected-video video { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: contain; | |
| } | |
| .gallery { | |
| display: grid; | |
| grid-template-columns: repeat(12, 1fr); | |
| gap: 10px; | |
| } | |
| .thumbnail { | |
| position: relative; | |
| padding-top: 56.25%; /* 16:9 비율 */ | |
| cursor: pointer; | |
| overflow: hidden; | |
| background-color: #000; | |
| } | |
| .thumbnail video { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: transform 0.3s ease; | |
| } | |
| .thumbnail:hover video { | |
| transform: scale(1.1); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="selected-content"> | |
| <div class="selected-thumbnail"> | |
| <video id="selected-thumb" playsinline muted> | |
| <source src="" type="video/mp4"> | |
| </video> | |
| </div> | |
| <div class="selected-video"> | |
| <video id="selected-video" controls> | |
| <source src="" type="video/mp4"> | |
| </video> | |
| </div> | |
| </div> | |
| <div class="gallery" id="video-gallery"></div> | |
| </div> | |
| <script> | |
| async function getVideoFiles() { | |
| try { | |
| const response = await fetch('.'); | |
| const text = await response.text(); | |
| const parser = new DOMParser(); | |
| const doc = parser.parseFromString(text, 'text/html'); | |
| const links = Array.from(doc.querySelectorAll('a')); | |
| return links | |
| .map(link => link.href) | |
| .filter(href => href.endsWith('.mp4')) | |
| .sort(); | |
| } catch (error) { | |
| console.error('Error loading video files:', error); | |
| return []; | |
| } | |
| } | |
| async function initializeGallery() { | |
| const gallery = document.getElementById('video-gallery'); | |
| const selectedThumb = document.getElementById('selected-thumb'); | |
| const selectedVideo = document.getElementById('selected-video'); | |
| const videoFiles = await getVideoFiles(); | |
| videoFiles.forEach((videoPath) => { | |
| const thumbnail = document.createElement('div'); | |
| thumbnail.className = 'thumbnail'; | |
| const thumbVideo = document.createElement('video'); | |
| thumbVideo.src = videoPath; | |
| thumbVideo.playsinline = true; | |
| thumbVideo.muted = true; | |
| thumbVideo.preload = 'metadata'; | |
| thumbVideo.addEventListener('loadeddata', () => { | |
| thumbVideo.currentTime = 0; | |
| }); | |
| thumbnail.appendChild(thumbVideo); | |
| thumbnail.addEventListener('click', () => { | |
| selectedThumb.src = videoPath; | |
| selectedVideo.src = videoPath; | |
| selectedThumb.currentTime = 0; | |
| selectedVideo.play(); | |
| }); | |
| gallery.appendChild(thumbnail); | |
| }); | |
| // 첫 번째 비디오 자동 선택 | |
| if (videoFiles.length > 0) { | |
| selectedThumb.src = videoFiles[0]; | |
| selectedVideo.src = videoFiles[0]; | |
| selectedThumb.currentTime = 0; | |
| } | |
| } | |
| // 갤러리 초기화 | |
| initializeGallery(); | |
| </script> | |
| </body> | |
| </html> |