Add HTML files for new website design
Dieser Commit ist enthalten in:
Claude Project Manager
873
accountforger-video.html
Normale Datei
873
accountforger-video.html
Normale Datei
@ -0,0 +1,873 @@
|
||||
<!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>
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren