Update index.html
Browse files- index.html +61 -15
index.html
CHANGED
|
@@ -602,6 +602,16 @@
|
|
| 602 |
width: 100%;
|
| 603 |
height: 100%;
|
| 604 |
object-fit: cover;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 605 |
}
|
| 606 |
|
| 607 |
.play-overlay {
|
|
@@ -1695,7 +1705,7 @@
|
|
| 1695 |
videoCard.innerHTML = `
|
| 1696 |
<div class="video-link">
|
| 1697 |
<div class="video-thumbnail">
|
| 1698 |
-
<video id="video-${index}"
|
| 1699 |
<source src="${videoFile}" type="video/mp4">
|
| 1700 |
브라우저가 비디오 재생을 지원하지 않습니다.
|
| 1701 |
</video>
|
|
@@ -1733,29 +1743,60 @@
|
|
| 1733 |
|
| 1734 |
if (video.paused) {
|
| 1735 |
// Pause all other videos
|
| 1736 |
-
document.querySelectorAll('video').forEach(v => {
|
| 1737 |
-
|
| 1738 |
-
|
| 1739 |
-
v.nextElementSibling
|
|
|
|
|
|
|
|
|
|
| 1740 |
}
|
| 1741 |
});
|
| 1742 |
|
| 1743 |
-
|
| 1744 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1745 |
} else {
|
| 1746 |
video.pause();
|
| 1747 |
playOverlay.style.display = 'flex';
|
| 1748 |
}
|
| 1749 |
}
|
| 1750 |
|
| 1751 |
-
// Function to download video
|
| 1752 |
function downloadVideo(filename) {
|
|
|
|
| 1753 |
const link = document.createElement('a');
|
| 1754 |
link.href = filename;
|
| 1755 |
link.download = filename;
|
| 1756 |
-
|
| 1757 |
-
|
| 1758 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1759 |
}
|
| 1760 |
|
| 1761 |
// Tab switching functionality
|
|
@@ -1837,15 +1878,20 @@
|
|
| 1837 |
});
|
| 1838 |
});
|
| 1839 |
|
| 1840 |
-
// Add hover preview for videos
|
| 1841 |
const videos = document.querySelectorAll('.video-thumbnail video');
|
| 1842 |
videos.forEach(video => {
|
| 1843 |
video.parentElement.addEventListener('mouseenter', function() {
|
| 1844 |
-
video.
|
|
|
|
|
|
|
|
|
|
| 1845 |
});
|
| 1846 |
video.parentElement.addEventListener('mouseleave', function() {
|
| 1847 |
-
video.
|
| 1848 |
-
|
|
|
|
|
|
|
| 1849 |
});
|
| 1850 |
});
|
| 1851 |
|
|
|
|
| 602 |
width: 100%;
|
| 603 |
height: 100%;
|
| 604 |
object-fit: cover;
|
| 605 |
+
display: block;
|
| 606 |
+
}
|
| 607 |
+
|
| 608 |
+
.video-thumbnail video::-webkit-media-controls {
|
| 609 |
+
opacity: 0;
|
| 610 |
+
transition: opacity 0.3s;
|
| 611 |
+
}
|
| 612 |
+
|
| 613 |
+
.video-thumbnail:hover video::-webkit-media-controls {
|
| 614 |
+
opacity: 1;
|
| 615 |
}
|
| 616 |
|
| 617 |
.play-overlay {
|
|
|
|
| 1705 |
videoCard.innerHTML = `
|
| 1706 |
<div class="video-link">
|
| 1707 |
<div class="video-thumbnail">
|
| 1708 |
+
<video id="video-${index}" controls preload="metadata">
|
| 1709 |
<source src="${videoFile}" type="video/mp4">
|
| 1710 |
브라우저가 비디오 재생을 지원하지 않습니다.
|
| 1711 |
</video>
|
|
|
|
| 1743 |
|
| 1744 |
if (video.paused) {
|
| 1745 |
// Pause all other videos
|
| 1746 |
+
document.querySelectorAll('video').forEach((v, i) => {
|
| 1747 |
+
if (i !== index) {
|
| 1748 |
+
v.pause();
|
| 1749 |
+
const overlay = v.nextElementSibling;
|
| 1750 |
+
if (overlay && overlay.classList.contains('play-overlay')) {
|
| 1751 |
+
overlay.style.display = 'flex';
|
| 1752 |
+
}
|
| 1753 |
}
|
| 1754 |
});
|
| 1755 |
|
| 1756 |
+
// Play with sound
|
| 1757 |
+
video.muted = false;
|
| 1758 |
+
video.play().then(() => {
|
| 1759 |
+
playOverlay.style.display = 'none';
|
| 1760 |
+
}).catch(err => {
|
| 1761 |
+
console.error('Play error:', err);
|
| 1762 |
+
// If autoplay fails, show controls
|
| 1763 |
+
video.controls = true;
|
| 1764 |
+
playOverlay.style.display = 'none';
|
| 1765 |
+
});
|
| 1766 |
} else {
|
| 1767 |
video.pause();
|
| 1768 |
playOverlay.style.display = 'flex';
|
| 1769 |
}
|
| 1770 |
}
|
| 1771 |
|
| 1772 |
+
// Function to download video with proper headers
|
| 1773 |
function downloadVideo(filename) {
|
| 1774 |
+
// Create a temporary anchor element
|
| 1775 |
const link = document.createElement('a');
|
| 1776 |
link.href = filename;
|
| 1777 |
link.download = filename;
|
| 1778 |
+
link.style.display = 'none';
|
| 1779 |
+
|
| 1780 |
+
// Force download using fetch
|
| 1781 |
+
fetch(filename)
|
| 1782 |
+
.then(response => {
|
| 1783 |
+
if (!response.ok) {
|
| 1784 |
+
throw new Error('파일을 찾을 수 없습니다.');
|
| 1785 |
+
}
|
| 1786 |
+
return response.blob();
|
| 1787 |
+
})
|
| 1788 |
+
.then(blob => {
|
| 1789 |
+
const url = window.URL.createObjectURL(blob);
|
| 1790 |
+
link.href = url;
|
| 1791 |
+
document.body.appendChild(link);
|
| 1792 |
+
link.click();
|
| 1793 |
+
document.body.removeChild(link);
|
| 1794 |
+
window.URL.revokeObjectURL(url);
|
| 1795 |
+
})
|
| 1796 |
+
.catch(error => {
|
| 1797 |
+
console.error('Download error:', error);
|
| 1798 |
+
alert('파일 다운로드 중 오류가 발생했습니다.\n' + error.message);
|
| 1799 |
+
});
|
| 1800 |
}
|
| 1801 |
|
| 1802 |
// Tab switching functionality
|
|
|
|
| 1878 |
});
|
| 1879 |
});
|
| 1880 |
|
| 1881 |
+
// Add hover preview for videos (muted)
|
| 1882 |
const videos = document.querySelectorAll('.video-thumbnail video');
|
| 1883 |
videos.forEach(video => {
|
| 1884 |
video.parentElement.addEventListener('mouseenter', function() {
|
| 1885 |
+
if (video.paused) {
|
| 1886 |
+
video.muted = true; // Mute for hover preview
|
| 1887 |
+
video.play().catch(() => {});
|
| 1888 |
+
}
|
| 1889 |
});
|
| 1890 |
video.parentElement.addEventListener('mouseleave', function() {
|
| 1891 |
+
if (!video.hasAttribute('data-playing')) {
|
| 1892 |
+
video.pause();
|
| 1893 |
+
video.currentTime = 0;
|
| 1894 |
+
}
|
| 1895 |
});
|
| 1896 |
});
|
| 1897 |
|