873 Zeilen
30 KiB
HTML
873 Zeilen
30 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AccountForger</title>
|
|
<link rel="stylesheet" href="styles-intelsight.css">
|
|
<link rel="stylesheet" href="css/fonts.css">
|
|
<style>
|
|
:root {
|
|
--vh: 1vh;
|
|
}
|
|
|
|
body {
|
|
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
|
|
min-height: 100vh;
|
|
min-height: calc(var(--vh, 1vh) * 100);
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.video-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 100vh;
|
|
min-height: calc(var(--vh, 1vh) * 100);
|
|
padding: 2rem;
|
|
position: relative;
|
|
}
|
|
|
|
.back-button {
|
|
position: absolute;
|
|
top: 2rem;
|
|
left: 2rem;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.75rem 1.5rem;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: 8px;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 500;
|
|
font-size: 0.95rem;
|
|
transition: all 0.3s ease;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.back-button:hover {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
transform: translateX(-5px);
|
|
}
|
|
|
|
.video-header {
|
|
text-align: center;
|
|
margin-bottom: 2rem;
|
|
animation: fadeInUp 0.8s ease;
|
|
}
|
|
|
|
.video-header h1 {
|
|
font-family: 'Bebas Neue', sans-serif;
|
|
font-size: 3rem;
|
|
color: #fff;
|
|
margin-bottom: 0.5rem;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.video-header p {
|
|
color: rgba(255, 255, 255, 0.7);
|
|
font-size: 1.1rem;
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.video-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
background: #000;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
|
|
animation: fadeInUp 1s ease 0.2s both;
|
|
}
|
|
|
|
.video-protection {
|
|
position: relative;
|
|
width: 100%;
|
|
padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
|
|
height: 0;
|
|
background: #000;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
}
|
|
|
|
.video-protection video {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
pointer-events: auto;
|
|
background-color: #000;
|
|
}
|
|
|
|
/* Overlay to prevent right-click */
|
|
.video-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 10;
|
|
background: transparent;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Custom controls */
|
|
.custom-controls {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
|
|
padding: 1.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
z-index: 20;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.video-wrapper:hover .custom-controls,
|
|
.video-wrapper.controls-visible .custom-controls {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Fullscreen specific styles - Direct video element */
|
|
video:fullscreen {
|
|
position: fixed !important;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
width: 100vw !important;
|
|
height: 100vh !important;
|
|
object-fit: contain !important;
|
|
background-color: #000 !important;
|
|
z-index: 999999 !important;
|
|
}
|
|
|
|
video:-webkit-full-screen {
|
|
position: fixed !important;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
width: 100vw !important;
|
|
height: 100vh !important;
|
|
object-fit: contain !important;
|
|
background-color: #000 !important;
|
|
z-index: 999999 !important;
|
|
}
|
|
|
|
video:-moz-full-screen {
|
|
position: fixed !important;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
width: 100vw !important;
|
|
height: 100vh !important;
|
|
object-fit: contain !important;
|
|
background-color: #000 !important;
|
|
z-index: 999999 !important;
|
|
}
|
|
|
|
video:-ms-fullscreen {
|
|
position: fixed !important;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
width: 100vw !important;
|
|
height: 100vh !important;
|
|
object-fit: contain !important;
|
|
background-color: #000 !important;
|
|
z-index: 999999 !important;
|
|
}
|
|
|
|
/* Fallback: Wrapper fullscreen styles */
|
|
.video-wrapper:fullscreen,
|
|
.video-wrapper:-webkit-full-screen,
|
|
.video-wrapper:-moz-full-screen,
|
|
.video-wrapper:-ms-fullscreen {
|
|
position: fixed !important;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
width: 100vw !important;
|
|
height: 100vh !important;
|
|
background-color: #000 !important;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
.video-wrapper:fullscreen .video-protection,
|
|
.video-wrapper:-webkit-full-screen .video-protection,
|
|
.video-wrapper:-moz-full-screen .video-protection,
|
|
.video-wrapper:-ms-fullscreen .video-protection {
|
|
width: 100vw !important;
|
|
height: 100vh !important;
|
|
padding: 0 !important;
|
|
background-color: #000 !important;
|
|
}
|
|
|
|
.video-wrapper:fullscreen video,
|
|
.video-wrapper:-webkit-full-screen video,
|
|
.video-wrapper:-moz-full-screen video,
|
|
.video-wrapper:-ms-fullscreen video {
|
|
width: 100vw !important;
|
|
height: 100vh !important;
|
|
object-fit: contain !important;
|
|
background-color: #000 !important;
|
|
}
|
|
|
|
.video-wrapper:fullscreen .custom-controls,
|
|
.video-wrapper:-webkit-full-screen .custom-controls,
|
|
.video-wrapper:-moz-full-screen .custom-controls,
|
|
.video-wrapper:-ms-fullscreen .custom-controls {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 2rem;
|
|
background: linear-gradient(to top, rgba(0,0,0,0.95), transparent);
|
|
z-index: 100;
|
|
}
|
|
|
|
.video-wrapper:fullscreen .video-overlay,
|
|
.video-wrapper:-webkit-full-screen .video-overlay,
|
|
.video-wrapper:-moz-full-screen .video-overlay,
|
|
.video-wrapper:-ms-fullscreen .video-overlay {
|
|
display: none !important;
|
|
}
|
|
|
|
.play-button, .fullscreen-button, .volume-button {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border: none;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.play-button:hover, .fullscreen-button:hover, .volume-button:hover {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.play-button svg, .fullscreen-button svg, .volume-button svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
fill: #fff;
|
|
}
|
|
|
|
.volume-control {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.volume-slider {
|
|
width: 80px;
|
|
height: 4px;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 2px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.volume-control:hover .volume-slider {
|
|
opacity: 1;
|
|
}
|
|
|
|
.volume-fill {
|
|
height: 100%;
|
|
background: #00d4ff;
|
|
border-radius: 2px;
|
|
width: 100%;
|
|
}
|
|
|
|
.progress-bar {
|
|
flex: 1;
|
|
height: 4px;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 2px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: #00d4ff;
|
|
border-radius: 2px;
|
|
width: 0%;
|
|
transition: width 0.1s linear;
|
|
}
|
|
|
|
.time-display {
|
|
color: #fff;
|
|
font-size: 0.9rem;
|
|
font-family: 'Inter', sans-serif;
|
|
min-width: 100px;
|
|
text-align: right;
|
|
}
|
|
|
|
/* Security notice */
|
|
.security-notice {
|
|
margin-top: 2rem;
|
|
padding: 1rem;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 400;
|
|
font-size: 0.9rem;
|
|
animation: fadeInUp 1.2s ease 0.4s both;
|
|
}
|
|
|
|
.security-notice svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
vertical-align: middle;
|
|
margin-right: 0.5rem;
|
|
fill: #00d4ff;
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Mobile responsive */
|
|
@media (max-width: 768px) {
|
|
.video-container {
|
|
padding: 1rem;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.video-header {
|
|
margin-bottom: 1rem;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.video-header h1 {
|
|
font-size: 1.75rem;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.video-header p {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.back-button {
|
|
top: 1rem;
|
|
left: 1rem;
|
|
padding: 0.5rem 1rem;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.video-wrapper {
|
|
max-width: 100%;
|
|
margin: 0 auto;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.video-protection {
|
|
padding-bottom: 56.25%; /* 16:9 aspect ratio */
|
|
}
|
|
|
|
.custom-controls {
|
|
padding: 0.75rem;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.play-button, .fullscreen-button, .volume-button {
|
|
width: 36px;
|
|
height: 36px;
|
|
}
|
|
|
|
.play-button svg, .fullscreen-button svg, .volume-button svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.progress-bar {
|
|
width: 100%;
|
|
order: -1;
|
|
flex-basis: 100%;
|
|
margin-bottom: 0.5rem;
|
|
height: 6px;
|
|
}
|
|
|
|
.time-display {
|
|
font-size: 0.8rem;
|
|
min-width: 80px;
|
|
}
|
|
|
|
.volume-control {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.volume-slider {
|
|
width: 60px;
|
|
height: 6px;
|
|
}
|
|
|
|
.security-notice {
|
|
margin-top: 1rem;
|
|
padding: 0.75rem;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.security-notice svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
}
|
|
|
|
/* Extra small devices (phones in portrait) */
|
|
@media (max-width: 480px) {
|
|
.video-header h1 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.video-header p {
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.back-button {
|
|
padding: 0.4rem 0.8rem;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.back-button svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.custom-controls {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.play-button, .fullscreen-button, .volume-button {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
.time-display {
|
|
font-size: 0.75rem;
|
|
min-width: 70px;
|
|
}
|
|
|
|
.volume-slider {
|
|
width: 50px;
|
|
}
|
|
}
|
|
|
|
/* Landscape mode on mobile */
|
|
@media (max-width: 768px) and (orientation: landscape) {
|
|
.video-container {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.video-header {
|
|
margin-bottom: 0.5rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.video-header h1 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.video-header p {
|
|
display: none;
|
|
}
|
|
|
|
.video-wrapper {
|
|
max-height: 80vh;
|
|
}
|
|
|
|
.security-notice {
|
|
display: none;
|
|
}
|
|
|
|
.back-button {
|
|
top: 0.5rem;
|
|
left: 0.5rem;
|
|
padding: 0.3rem 0.6rem;
|
|
font-size: 0.75rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="video-container">
|
|
<a href="index.html" class="back-button">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M19 12H5M5 12L12 19M5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
Zurück zur Hauptseite
|
|
</a>
|
|
|
|
<div class="video-header">
|
|
<h1>AccountForger</h1>
|
|
<p>Exklusiver Zugang für autorisierte Behörden</p>
|
|
</div>
|
|
|
|
<div class="video-wrapper">
|
|
<div class="video-protection">
|
|
<video id="protectedVideo" controlsList="nodownload" disablePictureInPicture playsinline>
|
|
<source src="assets/videos/AFv6.mp4" type="video/mp4">
|
|
Ihr Browser unterstützt das Video-Tag nicht.
|
|
</video>
|
|
<div class="video-overlay"></div>
|
|
<div class="custom-controls">
|
|
<button class="play-button" id="playBtn">
|
|
<svg viewBox="0 0 24 24">
|
|
<polygon points="5,3 19,12 5,21" />
|
|
</svg>
|
|
</button>
|
|
<div class="progress-bar" id="progressBar">
|
|
<div class="progress-fill" id="progressFill"></div>
|
|
</div>
|
|
<div class="time-display" id="timeDisplay">0:00 / 0:00</div>
|
|
<div class="volume-control">
|
|
<button class="volume-button" id="volumeBtn">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
|
|
</svg>
|
|
</button>
|
|
<div class="volume-slider" id="volumeSlider">
|
|
<div class="volume-fill" id="volumeFill"></div>
|
|
</div>
|
|
</div>
|
|
<button class="fullscreen-button" id="fullscreenBtn">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="security-notice">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M12 2L2 7V11C2 16.5 6.5 20.5 12 22C17.5 20.5 22 16.5 22 11V7L12 2Z" stroke="currentColor" stroke-width="2"/>
|
|
<path d="M9 12L11 14L15 10" stroke="currentColor" stroke-width="2"/>
|
|
</svg>
|
|
Dieses Video ist geschützt und nur für autorisierte Nutzer zugänglich.
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Check authentication
|
|
if (!sessionStorage.getItem('accountForgerAuth')) {
|
|
window.location.href = 'index.html';
|
|
}
|
|
|
|
// Video player functionality
|
|
const video = document.getElementById('protectedVideo');
|
|
const videoWrapper = document.querySelector('.video-wrapper');
|
|
const playBtn = document.getElementById('playBtn');
|
|
const progressBar = document.getElementById('progressBar');
|
|
const progressFill = document.getElementById('progressFill');
|
|
const timeDisplay = document.getElementById('timeDisplay');
|
|
const fullscreenBtn = document.getElementById('fullscreenBtn');
|
|
const volumeBtn = document.getElementById('volumeBtn');
|
|
const volumeSlider = document.getElementById('volumeSlider');
|
|
const volumeFill = document.getElementById('volumeFill');
|
|
|
|
// Disable right-click on video
|
|
document.addEventListener('contextmenu', function(e) {
|
|
if (e.target.tagName === 'VIDEO') {
|
|
e.preventDefault();
|
|
return false;
|
|
}
|
|
});
|
|
|
|
// Prevent video download
|
|
video.addEventListener('contextmenu', function(e) {
|
|
e.preventDefault();
|
|
return false;
|
|
});
|
|
|
|
// Play/Pause functionality
|
|
playBtn.addEventListener('click', function() {
|
|
if (video.paused) {
|
|
video.play();
|
|
playBtn.innerHTML = '<svg viewBox="0 0 24 24"><rect x="6" y="4" width="4" height="16" /><rect x="14" y="4" width="4" height="16" /></svg>';
|
|
} else {
|
|
video.pause();
|
|
playBtn.innerHTML = '<svg viewBox="0 0 24 24"><polygon points="5,3 19,12 5,21" /></svg>';
|
|
}
|
|
});
|
|
|
|
// Update progress bar
|
|
video.addEventListener('timeupdate', function() {
|
|
const progress = (video.currentTime / video.duration) * 100;
|
|
progressFill.style.width = progress + '%';
|
|
|
|
const currentMinutes = Math.floor(video.currentTime / 60);
|
|
const currentSeconds = Math.floor(video.currentTime % 60).toString().padStart(2, '0');
|
|
const durationMinutes = Math.floor(video.duration / 60);
|
|
const durationSeconds = Math.floor(video.duration % 60).toString().padStart(2, '0');
|
|
|
|
timeDisplay.textContent = `${currentMinutes}:${currentSeconds} / ${durationMinutes}:${durationSeconds}`;
|
|
});
|
|
|
|
// Seek functionality
|
|
progressBar.addEventListener('click', function(e) {
|
|
const rect = progressBar.getBoundingClientRect();
|
|
const pos = (e.clientX - rect.left) / rect.width;
|
|
video.currentTime = pos * video.duration;
|
|
});
|
|
|
|
// Video ended
|
|
video.addEventListener('ended', function() {
|
|
playBtn.innerHTML = '<svg viewBox="0 0 24 24"><polygon points="5,3 19,12 5,21" /></svg>';
|
|
});
|
|
|
|
// Fullscreen functionality - Simplified approach
|
|
fullscreenBtn.addEventListener('click', function() {
|
|
if (!document.fullscreenElement) {
|
|
// Use native video fullscreen if available
|
|
if (video.requestFullscreen) {
|
|
video.requestFullscreen();
|
|
} else if (video.webkitRequestFullscreen) {
|
|
// Safari/iOS
|
|
video.webkitRequestFullscreen();
|
|
} else if (video.webkitEnterFullscreen) {
|
|
// iOS Safari specific
|
|
video.webkitEnterFullscreen();
|
|
} else if (video.mozRequestFullScreen) {
|
|
video.mozRequestFullScreen();
|
|
} else if (video.msRequestFullscreen) {
|
|
video.msRequestFullscreen();
|
|
} else {
|
|
// Fallback to wrapper fullscreen
|
|
if (videoWrapper.requestFullscreen) {
|
|
videoWrapper.requestFullscreen();
|
|
} else if (videoWrapper.webkitRequestFullscreen) {
|
|
videoWrapper.webkitRequestFullscreen();
|
|
} else if (videoWrapper.mozRequestFullScreen) {
|
|
videoWrapper.mozRequestFullScreen();
|
|
} else if (videoWrapper.msRequestFullscreen) {
|
|
videoWrapper.msRequestFullscreen();
|
|
}
|
|
}
|
|
fullscreenBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>';
|
|
} else {
|
|
// Exit fullscreen
|
|
if (document.exitFullscreen) {
|
|
document.exitFullscreen();
|
|
} else if (document.webkitExitFullscreen) {
|
|
document.webkitExitFullscreen();
|
|
} else if (document.mozCancelFullScreen) {
|
|
document.mozCancelFullScreen();
|
|
} else if (document.msExitFullscreen) {
|
|
document.msExitFullscreen();
|
|
}
|
|
fullscreenBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>';
|
|
}
|
|
});
|
|
|
|
// Fullscreen change event
|
|
document.addEventListener('fullscreenchange', updateFullscreenButton);
|
|
document.addEventListener('webkitfullscreenchange', updateFullscreenButton);
|
|
document.addEventListener('mozfullscreenchange', updateFullscreenButton);
|
|
document.addEventListener('MSFullscreenChange', updateFullscreenButton);
|
|
|
|
function updateFullscreenButton() {
|
|
if (document.fullscreenElement ||
|
|
document.webkitFullscreenElement ||
|
|
document.mozFullScreenElement ||
|
|
document.msFullscreenElement) {
|
|
fullscreenBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>';
|
|
} else {
|
|
fullscreenBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>';
|
|
}
|
|
}
|
|
|
|
// Volume control
|
|
volumeBtn.addEventListener('click', function() {
|
|
if (video.muted) {
|
|
video.muted = false;
|
|
video.volume = 1;
|
|
volumeFill.style.width = '100%';
|
|
volumeBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>';
|
|
} else {
|
|
video.muted = true;
|
|
volumeFill.style.width = '0%';
|
|
volumeBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></svg>';
|
|
}
|
|
});
|
|
|
|
volumeSlider.addEventListener('click', function(e) {
|
|
const rect = volumeSlider.getBoundingClientRect();
|
|
const pos = (e.clientX - rect.left) / rect.width;
|
|
video.volume = pos;
|
|
video.muted = false;
|
|
volumeFill.style.width = (pos * 100) + '%';
|
|
updateVolumeButton();
|
|
});
|
|
|
|
function updateVolumeButton() {
|
|
if (video.muted || video.volume === 0) {
|
|
volumeBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></svg>';
|
|
} else if (video.volume < 0.5) {
|
|
volumeBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M7 9v6h4l5 5V4L11 9H7z"/></svg>';
|
|
} else {
|
|
volumeBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>';
|
|
}
|
|
}
|
|
|
|
video.addEventListener('volumechange', function() {
|
|
volumeFill.style.width = (video.volume * 100) + '%';
|
|
updateVolumeButton();
|
|
});
|
|
|
|
// Keyboard shortcuts
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.code === 'Space') {
|
|
e.preventDefault();
|
|
playBtn.click();
|
|
} else if (e.code === 'ArrowLeft') {
|
|
video.currentTime -= 10;
|
|
} else if (e.code === 'ArrowRight') {
|
|
video.currentTime += 10;
|
|
} else if (e.code === 'ArrowUp') {
|
|
e.preventDefault();
|
|
video.volume = Math.min(1, video.volume + 0.1);
|
|
} else if (e.code === 'ArrowDown') {
|
|
e.preventDefault();
|
|
video.volume = Math.max(0, video.volume - 0.1);
|
|
} else if (e.code === 'KeyF') {
|
|
fullscreenBtn.click();
|
|
} else if (e.code === 'KeyM') {
|
|
volumeBtn.click();
|
|
} else if (e.code === 'Escape') {
|
|
if (document.fullscreenElement ||
|
|
document.webkitFullscreenElement ||
|
|
document.mozFullScreenElement ||
|
|
document.msFullscreenElement) {
|
|
fullscreenBtn.click();
|
|
}
|
|
}
|
|
});
|
|
|
|
// Show controls on mouse move
|
|
let hideControlsTimeout;
|
|
videoWrapper.addEventListener('mousemove', function() {
|
|
videoWrapper.classList.add('controls-visible');
|
|
clearTimeout(hideControlsTimeout);
|
|
hideControlsTimeout = setTimeout(() => {
|
|
if (!video.paused) {
|
|
videoWrapper.classList.remove('controls-visible');
|
|
}
|
|
}, 3000);
|
|
});
|
|
|
|
// Double-click for fullscreen
|
|
video.addEventListener('dblclick', function() {
|
|
fullscreenBtn.click();
|
|
});
|
|
|
|
// Touch support for mobile
|
|
let touchStartX = 0;
|
|
let touchStartY = 0;
|
|
let touchStartTime = 0;
|
|
|
|
video.addEventListener('touchstart', function(e) {
|
|
touchStartX = e.touches[0].clientX;
|
|
touchStartY = e.touches[0].clientY;
|
|
touchStartTime = Date.now();
|
|
}, { passive: true });
|
|
|
|
video.addEventListener('touchend', function(e) {
|
|
const touchEndTime = Date.now();
|
|
const touchDuration = touchEndTime - touchStartTime;
|
|
|
|
// Single tap to show/hide controls
|
|
if (touchDuration < 300) {
|
|
videoWrapper.classList.toggle('controls-visible');
|
|
}
|
|
}, { passive: true });
|
|
|
|
// Double tap for fullscreen on mobile
|
|
let lastTap = 0;
|
|
video.addEventListener('touchend', function(e) {
|
|
const currentTime = new Date().getTime();
|
|
const tapLength = currentTime - lastTap;
|
|
if (tapLength < 500 && tapLength > 0) {
|
|
fullscreenBtn.click();
|
|
}
|
|
lastTap = currentTime;
|
|
});
|
|
|
|
// Swipe gestures for seeking
|
|
let touchStartVideoTime = 0;
|
|
video.addEventListener('touchstart', function(e) {
|
|
touchStartVideoTime = video.currentTime;
|
|
touchStartX = e.touches[0].clientX;
|
|
}, { passive: true });
|
|
|
|
video.addEventListener('touchmove', function(e) {
|
|
if (touchStartX !== null) {
|
|
const touchCurrentX = e.touches[0].clientX;
|
|
const deltaX = touchCurrentX - touchStartX;
|
|
const seekAmount = (deltaX / window.innerWidth) * 30; // Max 30 seconds seek
|
|
|
|
const newTime = touchStartVideoTime + seekAmount;
|
|
video.currentTime = Math.max(0, Math.min(video.duration, newTime));
|
|
}
|
|
}, { passive: true });
|
|
|
|
// Mobile viewport height fix
|
|
function setMobileViewportHeight() {
|
|
const vh = window.innerHeight * 0.01;
|
|
document.documentElement.style.setProperty('--vh', `${vh}px`);
|
|
}
|
|
|
|
setMobileViewportHeight();
|
|
window.addEventListener('resize', setMobileViewportHeight);
|
|
window.addEventListener('orientationchange', setMobileViewportHeight);
|
|
|
|
// Prevent text selection
|
|
document.body.style.userSelect = 'none';
|
|
document.body.style.webkitUserSelect = 'none';
|
|
document.body.style.mozUserSelect = 'none';
|
|
document.body.style.msUserSelect = 'none';
|
|
|
|
// Additional protection against developer tools
|
|
document.addEventListener('keydown', function(e) {
|
|
// Prevent F12, Ctrl+Shift+I, Ctrl+Shift+J, Ctrl+U
|
|
if (e.keyCode === 123 ||
|
|
(e.ctrlKey && e.shiftKey && (e.keyCode === 73 || e.keyCode === 74)) ||
|
|
(e.ctrlKey && e.keyCode === 85)) {
|
|
e.preventDefault();
|
|
return false;
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |