Update index.html

index.html

@@ -140,45 +140,39 @@
             height: 100%;
             object-fit: contain;
         }
- 
-
-.thumbnail {
-    position: relative;
-    padding-top: 56.25%;
-    cursor: pointer;
-    overflow: hidden;
-    background-color: #000;
-    border: 3px solid #333;
-    border-radius: 8px;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
-    transition: transform 0.3s ease;
-}
-
-.thumbnail video {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.gallery {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 15px;
-    padding: 20px;
-    background: linear-gradient(45deg, #1a1a1a, #2c2c2c);
-    border-radius: 15px;
-}
-
+        .thumbnail {
+            position: relative;
+            padding-top: 56.25%;
+            cursor: pointer;
+            overflow: hidden;
+            background-color: #000;
+            border: 3px solid #333;
+            border-radius: 8px;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
+            transition: transform 0.3s ease;
+        }
+        .thumbnail video {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        .gallery {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 15px;
+            padding: 20px;
+            background: linear-gradient(45deg, #1a1a1a, #2c2c2c);
+            border-radius: 15px;
+        }
         .thumbnail:hover {
             transform: translateY(-5px) scale(1.02);
             box-shadow: 
                 0 8px 20px rgba(0, 0, 0, 0.8),
                 0 0 0 1px rgba(255, 255, 255, 0.2);
         }
-
         .thumbnail:hover video {
             transform: scale(1.1);
         }
@@ -218,7 +212,7 @@
     </div>
 
     <script>
-      
+
 // 비디오 파일 배열을 수정하여 순차적으로 탭 번호 할당
 const videoFiles = [
     // 첫 번째 그룹 (탭 1)
@@ -370,141 +364,93 @@ const videoFiles = [
   
     { file: 'tmps_zu8c60.output.mp4', tab: 8 }
 ];
-
       
-        function initializeGallery() {
-            const gallery = document.getElementById('video-gallery');
-            const selectedThumb = document.getElementById('selected-thumb');
-            const selectedVideo = document.getElementById('selected-video');
-            const initialLoadCount = 16;
-            let loadedVideos = 0;
-            videoFiles.forEach((videoData, index) => {
-                const thumbnail = document.createElement('div');
-                thumbnail.className = 'thumbnail';
-                thumbnail.dataset.tab = videoData.tab;
-                
-                if (index < initialLoadCount) {
-                    createVideoElement(thumbnail, videoData, true);
-                    loadedVideos++;
-                } else {
-                    thumbnail.dataset.videoSrc = videoData.file;
-                    thumbnail.style.backgroundColor = '#1a1a1a';
-                }
-                gallery.appendChild(thumbnail);
-            });
-            const observer = new IntersectionObserver((entries) => {
-                entries.forEach(entry => {
-                    if (entry.isIntersecting) {
-                        const thumbnail = entry.target;
-                        if (thumbnail.dataset.videoSrc) {
-                            createVideoElement(thumbnail, { file: thumbnail.dataset.videoSrc }, false);
-                            delete thumbnail.dataset.videoSrc;
-                        }
-                    }
-                });
-            }, {
-                root: null,
-                rootMargin: '50px',
-                threshold: 0.1
-            });
-            document.querySelectorAll('.thumbnail').forEach(thumb => {
-                observer.observe(thumb);
+
+        function createVideoElement(thumbnail, videoData) {
+            const thumbVideo = document.createElement('video');
+            thumbVideo.src = videoData.file;
+            thumbVideo.playsinline = true;
+            thumbVideo.muted = true;
+            thumbVideo.loop = true;
+            thumbVideo.preload = 'metadata';
+            
+            thumbVideo.addEventListener('loadeddata', () => {
+                thumbVideo.currentTime = 0;
             });
-            if (videoFiles.length > 0) {
-                selectedThumb.src = videoFiles[0].file;
-                selectedVideo.src = videoFiles[0].file;
-                selectedThumb.currentTime = 0;
-            }
-        }
-function createVideoElement(thumbnail, videoData, autoload) {
-    const thumbVideo = document.createElement('video');
-    thumbVideo.src = videoData.file;  // 직접 src 설정
-    thumbVideo.playsinline = true;
-    thumbVideo.muted = true;
-    thumbVideo.loop = true;  // 반복 재생 추가
-    thumbVideo.preload = 'metadata';
-    
-    // 비디오 로드 완료 후 처리
-    thumbVideo.addEventListener('loadeddata', () => {
-        thumbVideo.currentTime = 0;
-    });
 
-    // 에러 처리 추가
-    thumbVideo.addEventListener('error', (e) => {
-        console.error('Video loading error:', e);
-        thumbnail.style.backgroundColor = '#333';
-    });
+            thumbVideo.addEventListener('error', (e) => {
+                console.error('Video loading error:', e);
+                thumbnail.style.backgroundColor = '#333';
+            });
 
-    thumbnail.addEventListener('mouseenter', () => {
-        thumbVideo.play().catch(e => console.log('Playback failed:', e));
-    });
+            thumbnail.addEventListener('mouseenter', () => {
+                thumbVideo.play().catch(e => console.log('Playback failed:', e));
+            });
 
-    thumbnail.addEventListener('mouseleave', () => {
-        thumbVideo.pause();
-        thumbVideo.currentTime = 0;
-    });
+            thumbnail.addEventListener('mouseleave', () => {
+                thumbVideo.pause();
+                thumbVideo.currentTime = 0;
+            });
 
-    thumbnail.addEventListener('click', () => {
-        const selectedThumb = document.getElementById('selected-thumb');
-        const selectedVideo = document.getElementById('selected-video');
-        
-        selectedThumb.src = videoData.file;
-        selectedVideo.src = videoData.file;
-        selectedVideo.play().catch(e => console.log('Playback failed:', e));
-    });
+            thumbnail.addEventListener('click', () => {
+                const selectedThumb = document.getElementById('selected-thumb');
+                const selectedVideo = document.getElementById('selected-video');
+                
+                selectedThumb.src = videoData.file;
+                selectedVideo.src = videoData.file;
+                selectedVideo.play().catch(e => console.log('Playback failed:', e));
+            });
 
-    thumbnail.appendChild(thumbVideo);
-}
+            thumbnail.appendChild(thumbVideo);
+        }
 
-function initializeGallery() {
-    const gallery = document.getElementById('video-gallery');
-    const selectedThumb = document.getElementById('selected-thumb');
-    const selectedVideo = document.getElementById('selected-video');
+        function initializeGallery() {
+            const gallery = document.getElementById('video-gallery');
+            const selectedThumb = document.getElementById('selected-thumb');
+            const selectedVideo = document.getElementById('selected-video');
 
-    // 초기 비디오 설정
-    if (videoFiles.length > 0) {
-        selectedThumb.src = videoFiles[0].file;
-        selectedVideo.src = videoFiles[0].file;
-    }
+            if (videoFiles.length > 0) {
+                selectedThumb.src = videoFiles[0].file;
+                selectedVideo.src = videoFiles[0].file;
+            }
 
-    // 모든 비디오 썸네일 생성
-    videoFiles.forEach((videoData) => {
-        const thumbnail = document.createElement('div');
-        thumbnail.className = 'thumbnail';
-        thumbnail.dataset.tab = videoData.tab;
-        
-        createVideoElement(thumbnail, videoData, true);
-        gallery.appendChild(thumbnail);
-    });
+            videoFiles.forEach((videoData) => {
+                const thumbnail = document.createElement('div');
+                thumbnail.className = 'thumbnail';
+                thumbnail.dataset.tab = videoData.tab.toString();
+                createVideoElement(thumbnail, videoData);
+                gallery.appendChild(thumbnail);
+            });
 
-    // 첫 번째 탭 컨텐츠 표시
-    showTabContent('1');
-}
+            showTabContent('1');
+        }
 
-// 탭 컨텐츠 표시 함수
-function showTabContent(tabNumber) {
-    const thumbnails = document.querySelectorAll('.thumbnail');
-    thumbnails.forEach(thumb => {
-        if (thumb.dataset.tab === tabNumber) {
-            thumb.style.display = 'block';
-        } else {
-            thumb.style.display = 'none';
+        function showTabContent(tabNumber) {
+            const thumbnails = document.querySelectorAll('.thumbnail');
+            thumbnails.forEach(thumb => {
+                if (thumb.dataset.tab === tabNumber) {
+                    thumb.style.display = 'block';
+                } else {
+                    thumb.style.display = 'none';
+                }
+            });
         }
-    });
-}
 
-// 탭 버튼 이벤트 리스너
-document.querySelectorAll('.tab-button').forEach(button => {
-    button.addEventListener('click', () => {
-        document.querySelectorAll('.tab-button').forEach(btn => 
-            btn.classList.remove('active'));
-        button.classList.add('active');
-        showTabContent(button.dataset.tab);
-    });
-});
+        document.querySelectorAll('.tab-button').forEach(button => {
+            button.addEventListener('click', () => {
+                document.querySelectorAll('.tab-button').forEach(btn => 
+                    btn.classList.remove('active'));
+                button.classList.add('active');
+                showTabContent(button.dataset.tab);
+            });
+        });
 
-// 갤러�� 초기화
-initializeGallery();
+        document.addEventListener('DOMContentLoaded', () => {
+            initializeGallery();
+        });
     </script>
 </body>
-</html>
+</html>
+      
+
+